▪︎ 섹션 15. Context

▫︎ Context란?

기존의 일반적인 React Application의 경우 컴포넌트의 props를 통한 단방향 데이터 전달 → 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우 사용하기에 불편

Context

컴포넌트 트리를 통해 곧바로 컴포넌트를 전달하는 것


image.png

→ 자주 사용되는 컴포넌트(ex. 로그인여부, 프로필 정보)의 경우 전달 과정이 길어짐

image.png

→ Context를 사용시 곧바로 데이터 전달

언제 Context를 사용해야 할까?

여러 개의 Component들이 접근해야 하는 데이터

ex) 로그인 여부, 로그인 정보, UI 테마, 현재 언어 등

image.png

Context를 사용하기 전에 고려할 점

Component와 Context가 연동되면 재사용성이 떨어지기 때문에 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면 기존의 경우가 더 적합함

▫︎ Context API

React.createContext() 사용