[React🩵] Context

⬇️  이전에 공부했던 props와 props drilling 

[React🩵] Props

 

 

 

01.  props drilling의 문제점

props란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 것을 말한다(단방향 데이터 흐름)

props drilling이란 부모 컴포넌트에서 몇단계를 건너뛴 자식 컴포넌트로 데이터를 전달할 때 중간 단계의 컴포넌트가 불필요하게 props를 전달해야하는 문제를 의미한다

---

ex. 부모 → 자식 → 손자 컴포넌트가 존재할 때 부모 → 손자 컴포넌트로 데이터를 넘겨준다 가정하자

이때 자식 컴포넌트는 불필요한 데이터를 props로 전달해야 한다.  

---

 

여기서 알 수있는 props drilling의 문제점은

데이터가 여러 단계의 컴포넌트를 거쳐내려가야 하는 상황 발생 시 코드가 복잡해지고 추적이 어려워 유지보수가 어려워진다는 것이다

 

이것을 해결하기 위해 전역 상태관리 useContext를 사용한다

 

 

 

 

02.  useContext

React의 내장 기능으로 중간 컴포넌트의 불필요한 props 전달 없이 바로 접근이 가능하다

필요한 컴포넌트에서 직접 데이터를 가져올 수 있다는 장점이 있다

 

 

 

🩵  context API 필수 개념

• createContext: context를 생성
• useContext: context를 구독하고 해당 context의 현재 값을 읽는다
• Provider: context를 하위 컴포넌트에게 전달한다

 

 

 

03.  활용하기

GrandFather - Father - Child 총 세 단계의 컴포넌트가 있다고 가정하자

원래라면 GrandFather → Father → Child 순으로 props가 전달되며 props drilling이 일어나게된다

 

3-1.  props drilling 예제

import React from "react";

//1️⃣ 최상위 컴포넌트 (값을 설정하는 곳)
const GrandFather = () => {
  const user = "철수"
  return <Father user={user} />;
};

//2️⃣ 중간 컴포넌트 (props를 받아서 전달만 함)
const Father = ({ user }) => {
  return <Child user={user} />;
};

//3️⃣ 가장 하위 컴포넌트 (데이터를 사용)
const Child = ({ user }) => {
  return <h1>안녕하세요, {user}님!</h1>;
};

export default GrandFather;

 

 

3-2.  useContext 예제

// 1️⃣ Context 생성
const UserContext = createContext();

// 1️⃣ 최상위 컴포넌트 (Context 값을 제공하는 Provider)
const GrandFather = () => {
  const user = "철수";
  
  return (
    <UserContext.Provider value={{ user }}>
      <Father />
    </UserContext.Provider>
  );
};

// 2️⃣ 중간 컴포넌트 (props 전달 필요 없음)
const Father = () => {
  return <Child />;
};

// 3️⃣ 하위 컴포넌트 (데이터를 직접 사용)
const Child = () => {
  const user = useContext(UserContext);
  return <h1>안녕하세요, {user}님!</h1>;
};

 

이렇게만 보면 장점만 있는 것 같지만 단점도 있음

 

 

 

04.  주의점(단점)

useContext 사용 시 Provider에서 제공한 value가 달라지면 해당 context를 사용하고 있는 모든 컴포넌트가 리랜더링된다

리랜더링 신경 써야겠음...~

 

 

추후에 공부할 메모이제이션이 해답이 될 수 있다고 한다 - 기억하기