[React] React Hooks : useContext

 

• 리액트는 component Tree 형태로 되어있다.
• 전역적인 data를 props로 일일히 전달해준다면 복잡해지고 어려워진다.
• 이때 리액트는 context API를 제공해주는데 전역적으로 사용하는 data들을 여러 컴포넌트들끼리 쉽게 공유할수있는 방법을 제공해준다.
• 최상위 컴포넌트에서 제공해주면 필요한 컴포넌트에서만 사용할 수 있다.

 

context를 사용하는이유?

 

 

• 가장 아래있는 컴포넌트에서만 data가 필요한데도 불구하고 필요하지 않는 컴포넌트까지 전달이 된다.
• 이렇게 되면 컴포넌트들이 받는 props도 많아지고 코드도 복잡해진다.
• 전달하는 과정에서 잘못된 정보를 전달하거나 중간에 수정하면 문제해결이 어려워진다.

 

 

• props 대신 context를 사용하면 최상위 컴포넌트가 선언하면 필요한 컴포넌트에서 받아오기만 하면 된다.
• 이때 받아오는 컴포넌트는 useContext를 사용하면 된다.

​

그럼 굳이 props는 없어도 되는거 아닌가요?

​

context는 꼭 필요할때만!

• context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다
• context의 주된 목적은 다양한 레벨에 있는 많은 컴포넌트들에게 전역적인 데이터를 전달하기 위해서 이다.
• 단지 Prop drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려해보자.

​

useContext

• 최상위 컴포넌트에서 <context.Provider value={전달해주는값}>로 감싸주고 필요한 컴포넌트에서 useContext(context) 를 사용해서 전달해주면 된다.

 

 

---

 

 

📌 참고
별코딩 | 리액트 훅스 시리즈