[React 시작하기] 06. Context

Component간 통신하기

기본적으로 Component 간의 통신 방법은 props이다.

그렇기때문에 여러 층의 계층 구조를 가지는 컴포넌트들 간의 통신은 props를 여러번 거쳐야 하는 불편함이 있다.

상위 컴포넌트에서 하위컴포넌트에 state 내려주기

쉽게 설명하면, state의 처리는 상위 컴포넌트에서 끝내고 처리가 끝난 결과물을 props로 넘겨주면 된다.

하위 컴포넌트에서 상위 컴포넌트의 state 수정하기

이 때는 처리가 다 끝난 state를 내려주는 것이 아니라 setState 함수를 전달해준다.

Context

위와 같은 불편함을 없애기 위해 도입된 기술이다. Vue의 Store와 유사하다.

Context – React (reactjs.org)

Context – React

하위 컴포넌트 전체에 데이터 공유하기

가장 상위 컴포넌트에 '프로바이더'가 데이터를 'Set' 하면

모든 하위 컴포넌트에서는 해당 데이터를 'Get' 할 수 있다.

Get 하는 방법에는 다음과 같이 세가지 방법이 존재한다.

1. 컨슈머

2. 클래스 컴포넌트의 this.context

3. 함수 컴포넌트의 useContext

Data Set하기

1. Context 생성

2. Context.Provider를 사용해 최상위 컴포넌트에 Data를 Set하기

가장 최상위 컴포넌트라고 할 수 있는 index.js에 다음과 같이 Context를 넣어준다.

value를 통해 people을 할당하면 PersonContext.Provider로 감싼 하위 컴포넌트에서는 어디서든 접근이 가능하다.

Data Get하기

1. Class에서 사용하는 방법

contextType에 context를 설정하면 this.context를 통해 데이터에 접근 가능하다.

단점은 여러개의 context를 연결하지 못한다는 점이다.

그래서 잘 사용하지 않는 방식이다.

2. Consumer를 사용하는 방법

context를 import한 후 Consumer로 감싼 뒤에 사용하는 방식이다.

3. useContext 훅 사용하기

context를 인자로 사용하는 useContext를 사용하는 방법이다.

useContext의 리턴 값으로 context의 데이터가 나온다.

요즘에는 hook을 통해 프로그래밍을 하는 것이 대세이므로 제일 자주 사용하는 방법이다.