useContext

useContext() ?

React에서 데이터의 전달은 부모와 자식 상하 관계로 props를 이용해 이루어 진다.

이전까지 학습한 컴포넌트의 트리는 간단하게 구성 됐기 때문에 뭐가 문제야 ? 라고 생각할 수 있지만 아래의 컴포넌트 트리를 보자.

목표는 A1의 데이터를 B2까지 전달하는 것이다.

그렇다면 A에서 A1의 데이터를 가져오는 함수를 선언하고 A1에게 props를 이용해 함수를 전달하고 데이터를 끌어 올리면 다시 App 컴포넌트에서 함수를 선언하고 ..... 등등 이런 과정을 거쳐야 한다.

이런 과정을 한번에 해결해 주는 것이 useContext 훅이다.

useContext 는 상태나 데이터를 전역으로 공유 가능하게 해주는 React에서 제공해주는 훅이다.

그렇다면 사용방법에 대해서 알아보자.

---

createContext()

우선 전역으로 공유할 상태 데이터가 포함된 Context를 생성해줘야 한다.

React의 메소드이기 때문에 아래와 같이 사용할 수 있다.

const SebellContext = React.createContext({
	name: 'sejong',
  	age: '27'
});

export default SebellContext;

SebellContext 라는 새로운 context를 만들고 인수로 객체를 넣어 기본값을 설정했다.

그렇다면 이렇게 만든 context는 어떻게 사용하는지 알아보자.

---

context.Provider

provider 는 말그대로 공급하는 역할이다. 컴포넌트처럼 사용이 가능하며 React에게 새로운 context를 알리는 역할도 한다.

const SebellContextProvider = (props) => {
  const myData = { name: 'sejong', age: 27 };
  
  return (
    	<SebellContext.Provider value={myData}>
    		{props.children}
		</SebellContext.Provider>
	);

만약 위에서 SebellContext 를 생성하는데에서 인수로 초기값을 전달했다면 해당 값들은 기본값이되어 Provider를 사용하지 않을때 사용이 되며 위 코드의 myData 는 SebellContextProvider 컴포넌트 내부 컴포넌트들에게 전달되어 사용될 값이 된다.

---

useContext

위 코드의 Provider가 제공해주는 myData 를 사용하기 위해서는 useContext 훅을 사용한다.

const App = () => {
  return (
    	<SebellContext.Provider>
    		<SebellKo></SebellKo>
    	</SebellContext.Provider>
    );
}

우선 사용하려는 컴포넌트를 위와같이 Provider 컴포넌트로 감싸주어 자식 컴포넌트들이 context의 상태를 리슨할수 있게 해준다.

import SebellContext from '../store/SebellContext;

const SebellKo = () => {
  const mydata = useContext(SebellContext);
  
  	return <div>name: {mydata.name} age: {mydata.age}</div>;
}

그후 useContext 를 사용해 context의 데이터를 불러온다.