React의 데이터 흐름
- 부모 컴포넌트에서 자식 컴포넌트로 전달되는 단방향이며 하향식이다.
- 자식 컴포넌트는 props를 통해 부모 컴포넌트로 부터 받은 데이터를 사용할 수 있다.
- 영상으로 보는 React의 데이터 흐름
✍ 그렇다면 하위 컴포넌트들 끼리 데이터를 공유해야할 경우에는 어떻게 해야할까?
👉 state를 사용하자!
state의 위치
- 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 state를 위치시킨다.
- 아래의 그림과 같은 페이지가 있다고 할 때 '새 글' 컴포넌트에서 새로운 글을 작성하여 '글 목록'컴포넌트에 추가하고 싶은 경우 '카테고리'라는 부모 컴포넌트에 state를 위치시켜 관리하면 된다.
state를 구분하는법
- 부모로부터 props를 통해 전달되는가?
👉 state가 아니다. - 시간이 지나도 변하지 않는가?
👉 state가 아니다. - 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가?
👉 state가 아니다.
State 끌어올리기
- 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다.
- 쉽게 말해 여러 하위 컴포넌트에서 사용하는 state를 가장 가까운 공통 조상 컴포넌트로 올려서 관리하는 것이다.
- state를 끌어올리면 해당 state를 사용하는 모든 하위 컴포넌트에서 동일한 state를 공유하게 된다.
상태 변경 함수가 정의된 컴포넌트와 상태 변경 함수를 호출하는 컴포넌트의 차이
1. 상태 변경 함수가 정의된 컴포넌트
- state를 가지고 있는 컴포넌트
- state를 업데이트하고 변경하는 함수(ex: setState)를 가지고 있다.
- 함수가 해당 컴포넌트의 state를 변경하는 데 사용된다.
- 주로 이벤트 핸들러 또는 비동기 작업의 응답에 따라 state를 업데이트한다.
- 상태 변경 함수는 주로 상태를 업데이트하고, 컴포넌트를 다시 렌더링하여 변경된 상태를 반영한다.
2. 상태 변경 함수를 호출하는 컴포넌트
- state를 가지고 있는 컴포넌트의 자식 컴포넌트
- 부모 컴포넌트로부터 props를 통해 상태 변경 함수를 전달받는다.
- 직접적인 상태 변경은 하지 않는다.
- 컴포넌트에서 이벤트가 발생하면, 상태 변경 함수를 호출하여 상태 변경을 요청한다.
- 주로 사용자 입력이나 이벤트에 응답하여 상태 변경한다.
정리노트