728x90
6.3) 기능 구현하기
1. 리액트에서 화면을 구성할 때 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성한다.
2. 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다.
3. 그렇기 때문에, 하나의 state를 여러 컴포넌트에서 관리하게 될 경우 이 state는 반드시 이런 컴포넌트들의 공통 부모가 되는 곳에서 만들어야 한다.
Viewer와 Controller는 형제관계?이기 때문에 props를 공유할 수 없다!
💡State Lifting (State 끌어올리기)
이렇게 state를 계층 구조상에서 위로 끌어올려서 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만드는 이러한 방법을 state Lifting(State 끌어올리기)라고 표현한다.
결론
리액트에서는 props라는 기능을 이용해서 부모에서 자식 방향으로만 데이터를 전달할 수 있다.
그렇기 때문에 데이터들을 항상 위에서 아래로 하나의 방향으로만 흐른다.
이를 단방향 데이터 흐름이라고 부른다.
그렇기 때문에! 이를 고려하여 데이터의 원천인 state를 어떤 컴포넌트에 위치시킬 것인지 고민하고 고려해서 결정해야 한다.
'공부 > frontend' 카테고리의 다른 글
| useReducer (0) | 2025.01.31 |
|---|---|
| 라이프 사이클(useEffect) (1) | 2025.01.31 |
| React.js 입문 (0) | 2025.01.30 |
| React.js 개론 (1) | 2025.01.30 |
| Node.js 기초 (0) | 2025.01.29 |
