useContext?
리액트의 훅 중 하나로 Context API를 쉽게 사용할 수 있도록 도와준다.
Context는 리액트 애플리케이션에 전역적으로 데이터를 공유할 수 있는 방법을 제공한다.
이를 통해 여러 컴포넌트 간에 props를 일일히 전달하지 않고도 데이터를 손쉽게 전달할 수 있다.
이렇게 되면 props drilling현상이 일어난다.
props drilling?이란
- 깊이가 너무 깊어지면 해당 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워진다.
- 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어진다.
context API
useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있다.
- createContext: context를 생성
- useContext: conext를 구독하고 해당 context의 현재 값을 읽는다.
- provider: context를 하위 컴포넌트에게 전달.
기본 사용법
- import createContext, useContext
- context 생성
const MyContext = createContext(); - Provider 설정
context의 값을 제공하기 위해 provider를 사용
<MyContext.Provider value = {value}
실습
- src폴더 안에 context폴더 생성
- 사용할 context파일 생성 ex) FamilyContext.jsx
- FamilyContext.jsx에서
- 3-1. context 생성
export cost FamilyContext = createContext(null); - 3-2 createContext 임포트
import {createContext} from "react";
- 3-1. context 생성
- FaimilyContext가 필요한 곳에서
- 4-1 Faimily Context import하기
import { FamilyContext } from "../context/familyContext"; - 4-2 FamilyContext,Provider로 감싸주기
여기서 value는 3.1에서 생성한 FamilContext안의 value로 들어간다.
- 4-1 Faimily Context import하기
- 값을 사용할 부분의 jsx로 이동 (Child.jsx)
5-1. useContext import
5-2. 생성한 context import
5-3. useContext를 사용하여 data에 context 값 담기
5-4. 담은 data의 value들을 꺼내서 사용하기
이렇게 사용하면 부모 -> 자식 -> 자식 -> 자식 이런식으로 props를 드릴링 할 필요가 없고,
사용할 자식에서 useContext를 사용하여 생성한 Context를 import 하여 사용하면 된다!
context API를 사용할 때 주의사항
Provider에서 제공한 value가 달라지게 되면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링이 일어난다는 문제점이 있다.
그래서 value부분을 항상 신경을 써야한다.
정리
useContext의 존재를 모를때에는
실습 할 때 컴포넌트를 분리하는 과정에서 부모에서 props를 자식으로 복잡하게 많이 내려줬어야 했는데,
너무 복잡해져서 이게 맞나? 뭔가 이상한데?
라는 생각으로 props를 여기저기 내려줬던 기억이 있다.
일단 다른 방도는 없으니 내려주고 내려주고 하는 과정에서
내머리도 복잡, 코드도 복잡해졌었던 기억이 있다.
이게 props drilling이라는 것을 알게되었고
다음 실습부터는 useContext를 사용하여 context API를 사용할 때 주의사항을 고려하며 코드의 복잡성을 줄여 코드를 작성해야겠다는 생각이 들었다!
빨리 깔끔하게 컴포넌트를 분리하고,
깔끔하게 코드 리팩토링하여 코드를 작성하는 실력이 되었으면 좋겠다!
그 날이 오기까지 열심히 실습을 하며 많은 시행착오를 겪어야 겠다!
