props 대신 쓸 수 있는 useContext.

React에서 컴포넌트끼리 데이터를 연결할 수 있는 방법은 크게 세 가지가 있다.

 

1) props

 

2) redux

 

3) useContext

 

이 포스트는 useContext에 대해 다루고자한다.

 

 

 

useContext는 말그대로 문맥을 이용한다는 뜻인데,

 

state 변수를 공유하고 싶은 범위( 그 안에 컴포넌트가 몇 개 있든 상관이 없다.)에 태그를 씌우면

 

그 태그 안에 state 변수가 공유되므로 props를 쓰지 않고 편하게 컴포넌트끼리 데이터 공유가 가능하다.

 

 

먼저 컴포넌트 밖에,

const stockContext = React.createContext();

 

이렇게 createContext라는 함수로 문맥을 만들겠다는 선언을 해준다.

 

이 때 react 라이브러리에서 React가 import 돼있어야한다.

 

 

 

그리고 데이터를 공유하기 원하는 범위에

 

<아까 createContext 함수로 만든 변수 이름.Provider value={ 공유하고자하는 state 변수 }>

 

이렇게 태그를 만들어 감싸준다.

 

그럼 저 태그 안의 컴포넌트와 그 안의 하위 컴포넌트들도 저 값을 사용 가능하다.

 

 

 

마지막으로,

사용하고자하는 하위 컴포넌트에서 useContext라는 함수를 사용해 전송된 데이터를 받아야하는데,

 

인자로 처음 상위 컴포넌트에서 createContext 함수로 만들었던 변수 이름을 넣어주고

 

현재 컴포넌트에서 사용할 변수 이름을 선언해 거기에 할당해주면 끝이다.

 

 

참고로

useContext 함수도 저런 import가 필요하다.

 

 

 

또한, createContext로 생성한 문맥을 다른 js파일의 컴포넌트에서 사용하고싶을 경우

 

일단 변수를 만들고 해당 변수를 export한다.

 

그리고 변수.Provider value={ state 변수 명 } 이라는 태그를 원하는 부위에 씌워준 다음,

 

 

사용할 js파일에서 import 하고

 

원하는 컴포넌트 안에서, 선언한 변수 = useContext(전송된 변수 명);

 

으로 받아주면 된다.

 

 

즉, export와 import만 잘 해주면 된다는 얘기.

 

 

 

 

기억이 안날 때는 참고를 해보자.