[새싹 프론트엔드] 7주차 - 1
state
• 값을 저장하거나 변경할 수 있는 객체
• 컴포넌트 내부에서 바뀔 수 있는 값을 의미
• 주로 버튼 클릭과 같은 이벤트와 함께 사용함
props와 차이점
• props는 부모 컴포넌트가 설정한 값을 전달받아 읽기 전용으로만 사용할 수 있음
• props는 컴포넌트 내부에서는 값을 직접 변경할 수 없음 (state는 변경 가능)
실습) props 값 변경해보기
App.js
ChangePropsValue.js
(빨간색 글 첫번째) = let {name} = props라고 써도 됨
실행 결과)
클릭 버튼을 눌러도 글자가 바뀌지 않음
이유 : function chageName()을 실행하려면 값을 변경해야하는데 props는 내부에서 값을 변경할 수 없음
state 종류
• 클래스형 컴포넌트의 state 속성
• 함수형 컴포넌트의 useState 함수
함수형 컴포넌트의 useState
useState 사용하기
배열 비구조화 할당
배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법
useState 함수
| const [value, setValue] = useState(값); |
value 값이 setvalue 함수로 인해 갱신되어 바뀜
• 값의 형태
숫자, 문자열, 객체, 배열
• 리턴 값
배열
첫 번째 원소 : 현재 상태
두 번째 원소 : 상태를 바꾸어 주는 함수
useState 사용하기
useState 함수
| const [인사, 인사변경] = useState('안녕하세요'); |
인사라는 변수에 안녕하세요를 초기값으로 넣어놓은 것
• 값의 형태
문자열
• 리턴 값
배열
첫 번째 원소 : ‘안녕하세요’
두 번째 원소 : ‘안녕하세요’를 다른 값으로 바꾸어 주는 함수
실습) useState 값 가져오기 - 문자열
App.js
Hello.js
실행 결과)
실습) useState 값 가져오기 - 배열
(매개변수에 배열이 와도 됨)
Hello.js
실행 결과)
실습) 한 컴포넌트에서 useState 여러 번 사용
App.js
ChangeFont.js
실행 결과)
printconsolehandler
clickhandler
이런식으로 쓰기
state와 이벤트 연동
state와 클릭 이벤트 연동
함수 구현
실습) state와 클릭 이벤트 연동
App.js
EventClick.js
실행 결과)
state 값 변경
실습) state 값 변경하기
App.js
ChangeValue.js
실행 결과) value가 바뀜
state 값 변경하기
객체 또는 배열의 state 값 변경
• 객체 또는 배열의 복사본을 만들어 값을 업데이트한 후, 복사본의 상태를 useState() 함수를 통해 업데이트
• 아래와 같은 방식으로 값 변경하면 안됨
객체/배열에 대한 사본 만들기
• spread 연산자(…) 사용
객체/배열의 기존 내용을 변경하지 않고도 새로운 객체/배열을 생성할 수 있음
• 예) 객체 사본 만들기
실습) spread 연산자
Spread.js
실행 결과
Spread.js 수정
name 밖에 없었는데 age 추가
실행 결과) 위와 같은 결과를 기대했지만 다르게 나옴
객체를 복사할 때는 등호 연산자를 이용하면 안 된다 스프레드 연산자를 이용하기
Spread.js 수정
동일한 키를 들고 갔는데 서울이라는 애가 들어옴. 기존의 있던 키 값을 서울로 갱신 순소에 따라 다름.
나중에 오는 애가 기존 값을 갱신
실행 결과)
Spread.js 수정
실행 결과
Spread.js 수정
실행 결과
실습) state 값 변경하기 - 배열
App.js
ChangeArray.js
setValue 안에다가 값을 바꿔 갱신시켜줘야함
실행 결과)
클래스형 컴포넌트의 state
state 속성 사용하기
App.js
ClassState.js
생성자 안에서 state 초기화
실행 결과
state 값 변경하기
ClassState.js
실행 결과)
ClassState.js
실행 결과
<값을 변경>
1. const [값, 값변경함수] = useState(초기값)
2. 값 변경 => 값변수 = 변경할 값!! => 값 변경 o, 화면 갱신x
=> 값변경함수(변경할 값) => 값 변경 o, 화면 갱신o
3. 값 변경 원리
useState -> 리엑트 엔진 -> 개발자 값 변경 원해요
리엑트 엔진 -> 컴포넌트 방문 -> jsx return()
-> 변경사항 체크
-> 실제 변경된 부분만 갱신
-> 변경 안 된 부분은 유지
state 끌어올리기(Lifting State Up)
형제 컴포넌트 간 데이터 공유
해당 값을 필요로 하는 컴포넌트 간의 가장 가까운 공통 조상으로 state를 끌어올려 공유
방법
• 상위 컴포넌트의 ‘상태를 변경하는 함수’ 그 자체를 하위 컴포넌트로 전달(props)
• 전달된 함수를 하위 컴포넌트가 실행
실습) state 끌어올리기
App.js
ChildComponent.js
props -
부모가 전달해 준 함수
실행결과)
리엑트에서는 데이터 공유 불가능
그럼 어떻게 하지 ?
가장가까운 공통 부모를 찾아보는 것
ㄴ 서로 간의 데이터 공유 가능하게 하려고
🟠Set value : 실제 값을 바꾸는 함수
부모 👉 자식한테 자신이 가진 데이터 ( 문자열 숫자 배열 객체 함수 )
Const [value, setValue] = useState(10)
자식1한테 함수를 전달 => setValue(10)
value => 0 -> 10
자식1 -> props를 만들고 기다리면 -> props 안에 setValue()가 들어가 있음 -> props.setValue()
자식2한테 숫자 10을 전달 -> props
<ChildCom2 num={value}/>
자식1
-> 데이터를 생성 : 10
-> props -> setValue(값) -> props.setValue(10)
자식2
-> props 생성 -> props.num = 10
자식간의 데이터의 공유가 불가능하고,
부모는 언제든지 자식에게 데이터를 보내줄 수 있다는 특징을 이용한 점
🟠방법
- 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달(props)
- 전달된 함수를 하위 컴포넌트가 실행
(하향식, 단방향 데이터 전달을 깨지 않으면서 데이터를 보낼 수 있다.)
[실습회고]
지난 번 실습이 어려워서 그런진 몰라도 이번 실습은 쉽게 풀리고 useState의 기본적인 원리도 깨달을 수 있어 좋았다. 클릭이벤트와의 연동도 함수를 통해 이뤄진다. 근데 state끌어올리기 ..? 걍 오늘 하루 내내 끌어올리기 ? 끌어내리기 ? 계속 바꿔말하면서 어리둥절 한 상태,,, 분명 형제 컴포넌트들끼리 데이터 공유 못 해서,, 부모에서 만나게 해준다는 건 알겠습니다만 ,,, props쓰면 되는 건 알겠습니다만,,, 아무튼간에 좀 더 이해를 해보아야겠다.
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅