useContext 란?
리액트로 만든 앱은 여러 개의 컴포넌트로 이루어져 있다. 이 컴포넌트는 최상위 App 컴포넌트로 시작해서 트리 형태로 뻗어나간다.
props를 전달할 때는 부모 컴포넌트에서 자식 컴포넌트로 단계별로 전달하게 되는데,
이 때 React Context를 활용하면 리액트 앱에서 전역 데이터를 쉽게 공유 및 관리할 수 있다.
즉, props로 data를 일일이 내려보내주지 않아도, 하위 컴포넌트에서 필요하다면 해당 데이터 값에 접근할 수 있다.
Context를 사용하면 여러 컴포넌트가 사용해야 하는 전역적인 데이터를 사용할 때 편리하다.
useContext 사용법
- Context 생성
- 해당 Context 내보내기 (export)
- App.js에서 해당 Context 가져오기 (import)
- Context 태그(.Provider)로 컴포넌트를 감싸고, value에 공유할 데이터 값을 적어준다. (value={data})
- 해당 데이터를 필요로 하는 자식 및 자손 컴포넌트에서 해당 Context를 import 한다.
- useContext 반환 값을 변수에 저장해서, 변수나 state처럼 사용한다.
1. useContext 생성 및 export 하기
export는 1, 2번 한 가지를 선택해서 작성한다.
export 방법 1
context 폴더에 MyContext.js 파일을 만든 후 createContext를 import 하고,
createContext로 return 받은 변수를 export 해준다.
// MyContext.js
import { createContext } from 'react';
export const MyContext = createContext(null);export 방법 2
React.CreateContext를 호출해서, 반환 값을 담은 변수를 export 해준다.
export const MyContext = React.createContext();2. App.js 에서 import 하기
// App.js
import { MyContext } from '파일 경로';3. Context 태그로 컴포넌트를 감싸고, value에 공유할 데이터값 작성하기
컴포넌트명.Provider로 태그를 만들어 준 후, value 속성에 전달할 데이터 값을 작성해준다.
데이터가 여러 개일 경우, 객체 형태로 보내주는 것도 가능하다.
ex) <MyContext.Provider value={ {데이터1, 데이터2} }
// App.js
return (
<MyContext.Provider value={data}>
// 데이터를 공유할 컴포넌트 코드를 이 부분에 작성
ex. <Title /> // Title 컴포넌트
<Message /> // Message 컴포넌트
</MyContext.Provider value={data}>
);이렇게 하면 Props를 사용하지 않고도 value 값에 넣어준 데이터에 접근할 수 있게 된다.
이제 MyContext.Provider로 감싼 컴포넌트들은 value로 보낸 데이터를 공유해서 사용할 수 있다.
4. 해당 컴포넌트에서 Context import 하기
// Context의 data를 사용할 컴포넌트 위치에서
import { MyContext } from '위치 경로';5. 반환 값을 변수에 저장해서, 변수 또는 state처럼 사용
const ContextInsteadOfProps = useContext(MyContext);useContext(컨텍스트 이름);을 사용해서 변수에 저장 후 출력해보면,
이전에 value 속성으로 보낸 데이터의 값들을 확인할 수 있다.
디스트럭처링(Destructuring) 문법을 사용해서 꺼내오는 것도 가능하다.
디스트럭처링(Destructuring) 문법이란?
자바스크립트에서 배열(Array)이나 객체(Object)의 값을 쉽게 추출하여 변수에 할당할 수 있는 문법
주의 사항
Context API는 컴포넌트가 여러 개 중첩될 경우 사용하면 편리하지만,
state가 변경될 경우 다른 컴포넌트도 재렌더링 되기 때문에 성능 이슈가 생길 수 있다.
또한, React Context를 사용하면 해당 컴포넌트는 Context 없이 재사용이 어렵다는 단점이 있다.
따라서 전역 데이터를 한 곳에서 저장하고, 여러 컴포넌트에서 접근하고 싶은 경우에만 사용하는 것이 좋다.
