[React] useContext란?

사진 출처: https://www.youtube.com/watch?v=LwvXVEHS638

🍀 useContext

부모가 자식 컴포넌트에게 데이터를 전달하는 과정에서 필요한 컴포넌트에만 전역적인 상태의 값을 전달할 수 있음 (* Props Drilling 해소)
=> 글로벌 데이터(Theme, Language, User)와 같은 전역적인 데이터 관리에 유용

* Props Drilling: 부모 컴포넌트가 자식 컴포넌트로 props를 전달할 때 발생하는 구조적 문제 (필요로 하지않는 중간 컴포넌트까지 props를 전달할경우 디버깅이 복잡해짐)

---

일반적으로 리액트에서는 Props(자식선택자)를 이용하여 각 컴포넌트에 데이터를 전달합니다

하지만 아래 그림에서 보면, 맨 아래의 C와 E만 APP의 데이터를 필요로 하는데도 불구하고 A B D 와 같은 중간 컴포넌트까지 Props를 전달받게 됩니다
=> 코드가 더러워지고, * Props Drilling 발생

이 과정에서 useContext를 이용하면 Props를 전달하지않고도 상태의 값을 전역적으로 전달할 수 있습니다

다음 번에는 이렇게 전역적으로 상태를 관리하는 데에 도움을 주는 useContext를 사용하여 Dark Mode Theme를 만들어 보며 더 자세히 알아보도록 하겠습니다

---

다크 모드 구현
https://velog.io/@kiminn/React-다크-모드-구현하기feat.-useContext

---

별 코딩님의 유튜브 강의
https://www.youtube.com/watch?v=LwvXVEHS638
참고한 사이트
https://jaylee-log.tistory.com/55