State prev, State Lifting

:)3W

오늘도
배워봅니다.

1. State

• state는 리액트 컴포넌트에서 데이터를 담기위한 상자
• 상자에 담긴 내용들을 함수가 모두 끝나게 되면 화면에 반영

function countUp() {
	setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
}

• 우리가 원하는 모습은 버튼을 한번 클릭 했을때 카운트가 5번이 되는 모습이여야 하지만 1이 출력됨
• state눈 함수가 모두 끝나게 되면 화면에 반영
• 첫번째 줄에서 1이 상자에 담겼지만 아직 함수가 끝나기 전이므로 여전히 count는 0 이므로 1이 상자에 담기는 모습이 계속 반복이 되서 최종적으로는 마지막 줄에 담겨있는 1이 화면에 반영되는것이다.

- 문제해결

2. State prev

function countUp() {
	setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
    setCount((prev) => prev+ 1)
}

• prev를 사용하면 임시 저장 공간에 있는 값을 먼저 꺼내옴
• 임시저장공간에 있는 prev의 값을 계속 누적 시킴
• 최종적으로 5가 카운트 됨

3. State Lifting

• 리액트는 데이터가 단방향
• 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달이 가능 하지만, 반대로는 데이터 전달이 불가능함
• state Lifting은 state 끌어 올리기 라고 불린다
• 자식 컴포넌트1의 state를 자식 컴포넌트2 에서 보여주고 싶고 부모 컴포넌트에서도 보여주고 싶을때는 자식 컴포넌트1의 state를 부모 컴포넌트로 끌어올려 선언 해주고, props로 자식 컴포넌트1,2에 내려주는 것이다.
• 이 과정이 state Lifiting(state 끌어올리기)라고 한다