React 복습 / Context / Props Drilling

Context(문맥)

• 동일한 목적 하에 있는 그룹
• 한번에 데이터를 공급해주는 기능을 한다. ⇒ Props Drilling 문제를 해결할 수 있음

Props Drilling 이란?

• 리액트 컴포넌트의 계층구조에서 컴포넌트간에 Data를 전달할 때 Props를 사용한다. 이 Props는 부모에서 자식으로 단방향으로만 전달 가능하기떄문에, 2단계 이상 떨어져 있는 컴포넌트에 Data를 전달하려면 직접 전달할 수 없기 떄문에 경로상의 모든 컴포넌트에 Props 를 전달해야하는데 이것을 드릴로 땅을 파내려가는 것과 같다고하여 붙여진 명칭이다.

  ✔ Props가 손자 이상의 컴포넌트가 사용하기위해선 조상의 조상으로부터 계속 전달받아야하는 것이다.

Context 적용해보기

1. TodoContext로 선언하고 TodoContext를 Provider로 감쌀수 있다.
   

2. Provider로 감싸면 TodoEditor 과 TodoList는 Provider의 관리를 받는 컴포넌트이고 굳이 부모 - 자식 -손자 -손자손자 의 순으로 데이터를 전달할 필요 없다.
   

3. TodoEditor로 가면 props로 데이터를 전달받는게 아니라 useContext로 데이터를 전달 받는다.
   
   => TodoEditor에서는 onCreate만 필요하기 때문에 onCreate만 받아서 사용할 수 있다.

4. TodoList도 마찬가지로 Props로 데이터를 받는게 아니라 useContext로 데이터를 받는다.
   
   => TodoList는 todo 데이터만 필요하기때문에 todo만 받아서 사용 한다.

4.1. todoList의 하위 컴포넌트인 TodoItem 에 todoList에서 설정한 getSearchResult()의 값만 map으로 리턴받아서 props로 하위 컴포넌트로 전달했다.

4.2. todoItem에 가보면 map으로 props를 받은 애들은 구조분해해서 받고

onUpdate, onDelete는 useContext로 받아서 사용할 수 있다.

하지만 이렇게 적용하면 하위 컴포넌트 안에서 지정한 useMemo를 사용할 수 없고 Provider가 우선 적용된다. 그래서 useMemo랑 관계없이 Provider으로 감싸져있는 컴포넌트에 리렌더링이 일어나면 Provider으로 감싸진 모든 컴포넌트 전체가 리렌더링이 일어난다.

관련 노션

https://www.notion.so/Context-6912d20a6c4f451fa6c6d5f84a1dccbc

git

https://github.com/winsam003/MyCode.git