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