useContext

부모에서 자식 컴포넌트로 데이터 전달 시 단방향이 아닌 데이터 전달
prop drilling문제점으로 인한 useContext API 등장

context

특정 영역 안에서 state를 공유하는 것을 의미. 서로 값에 접근하고 업데이트할 수 있다.

주요 개념

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

예시 코드

• FamilyContext.js

import { createContext } from "react";

//context 생성, 초기값은 null
export const FamilyContext = createContext(null);

• App.jsx

import GrandFather from "./components/GrandFather";

const App = () => {
    return (
        <div>
            <GrandFather />
        </div>
    );
};

export default App;

• GrandFather.jsx

import Father from "./Father";
import { FamilyContext } from "../context/FamilyContext";

const GrandFather = () => {
    const name = "김종연";
    const age = "25";

		// Provider를 통해 value 전달 value는 객체 형태
		// Father를 감싸서 
		//GrandFather 하위 컴포넌트들은 Context안에서 데이터를 공유 할 수 있다.
    return (
        <FamilyContext.Provider
            value={{
                name,
                age,
            }}
        >
            <Father />
        </FamilyContext.Provider>
    );
};

export default GrandFather;

• Father.jsx
  Child 컴포넌트에게 name,age를 전달하는 역할 뿐이다.

import Child from "./Child";

const Father = () => {
    return (
        <div>
            <Child />
        </div>
    );
};

export default Father;

• Child.jsx
  GrandFather.jsx에서 부터 전달받은 name,age를 렌더링한다.

• ⚠️ 주의사항: Provider에서 제공한 value가 달라지게되면 useContext를 사용하던 모든 컴포넌트가 리렌더링 된다.

import { useContext } from "react";
import { FamilyContext } from "../context/FamilyContext";

const Child = () => {
		//useContext를 통해 FamilyContext안에서 전달된 값을 받는다.
    const { name, age } = useContext(FamilyContext);
    return (
        <div>
            이름은 <span>{name}</span>
            나이는<span>{age}</span>
        </div>
    );
};

export default Child;

하루를 마치며

오늘은 기분이 좋으면서도 좋지 않은 하루다. 왜냐하면 금요일이라 기분은 좋은데 주말동안 할 일이 많이 생겼기 때문이다. 그치만 지금은 부족한만큼 열심히 해야하기 때문에 이악물고 해야한다. 끝까지 버틸 것이다.