1. state Lifting(state 끌어올리기)
React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식, 단방향 데이터 흐름을 따르고 있다.
이러한 단방향 데이터 흐름은 코드를 데이터의 방향에 따라
부모 컴포넌트 >> 자식 컴포넌트순으로 읽어 내려가며 이해할 수 있기 때문에
코드의 흐름을 파악하기 쉽고, 기능 변경 사항에 대한 코드 수정이 쉽다.
허나 이 방식은 상위 컴포넌트에서 전달 받은 데이터의 형태나 타입만 알 수 있다.
그래서 state에서 온건지 하드코딩으로 입력 받은 내용인지는 알 수 없다.
그렇다면 자식 컴포넌트의 이벤트로 부모 컴포넌트의 상태를 바꾸려면 어떻게 해야할까?
그림과 같이 부모 컴포넌트의 상태변경 함수 setState를 자식 컴포넌트에게 전달 시켜
자식 컴포넌트에서 props.setState와 같이 실행 시키면 된다.
이러한 작업을 state 끌어올리기라고 한다.
Developer