[6주차] 리액트숙련: React Hooks - useContext(Context API)

useContext(Context API)

부모컴포넌트에서 자식 컴포넌트로 데이터를 props를 통해 전달한다.

하지만 그 깊이가 깊어지면, 오류추적이 힘들어진다.

 

그래서 등장한 것이 바로 useContext(Context API) 이다.

useContext 를 통해 전역데이터를 관리할 수 있다.

 

https://www.copycat.dev/blog/react-context/

 

 

useContext(Context API) 필수 개념

• createContext : context 생성
• Consumer : context 변화 감지
• Provider : context 전달(to 하위 컴포넌트)

 

useContext를 사용하지 않았을 때 예시

상황: Grandfather가 Child에게 어떤 정보를 알려줘서 child가 그 내용을 출력하도록 한다.

 

App.jsx

import './App.css';
import GrandFather from './components/GrandFather';


function App() {


  return (
    <GrandFather />
  );
}

export default App;

GrandFather.jsx

import React from 'react';
import Father from './Father';

function GrandFather() {

  const houseName ='스파르타';
  const pocketMoney = 10000;

  return (
    // Grnadfather가 Child에게 어떤 정보를 알려줘서 child가 그 내용을 출력하도록 한다.
    <Father houseName={houseName} pocketMoney={pocketMoney}/>
  )
}

export default GrandFather

Father.jsx

props

props.pocketMoney

props.houseName

 

props = {pocketMoney:a, houseName:b}

{pocketMoney, houseName} = props

 

import React from 'react';
import Child from './Child';


function Father({pocketMoney, houseName}) {

  return (
    <Child houseName={houseName} pocketMoney={pocketMoney}/>

  )
}

export default Father

Child.jsx

import React from 'react'

const style = {
  color: 'red',
  fontWeight: '900'
}

function Child({houseName, pocketMoney}) {
  return (
    <div>나는 이 집안의 막내. 할아버지가 우리 집 이름은 <span style={style}>{houseName}</span> 이고, 용돈은 <span style={style}>{pocketMoney}</span>를 받았어요.</div>
  )
}

export default Child

 

최종화면

 

 

 

 

 

useContext를 사용할때 예시

 

1. src 밑에 context 폴더 만들기, context 밑에 FamilyContexts.js 생성

2. FamilyContexts.js 에서 createContext 를 import 하기

import { createContext } from "react";

 

3. 초기값 null 설정하기

export const FamilyContext = createContext(null);

 

4. 데이터가 시작하는 jsx 파일의 return 부분에서 FamilyContext 로 감싸기, FamilyContext 를 import 하기

import React from 'react';
import Father from './Father';
import { FamilyContext } from '../context/FamilyContexts';

function GrandFather() {

  const houseName ='스파르타';
  const pocketMoney = 10000;

  return (
    <FamilyContext>
       <Father/>
    </FamilyContext>

  )
}

export default GrandFather

 

 

5. FamilyContext 에 Provider와 value 넣어주기

import React from 'react';
import Father from './Father';
import { FamilyContext } from '../context/FamilyContexts';

function GrandFather() {

  const houseName ='스파르타';
  const pocketMoney = 10000;

  return (
    <FamilyContext.Provider value={{
      houseName: houseName,
      pocketMoney: pocketMoney,
    }}>
       <Father/>
    </FamilyContext.Provider>

  )
}

export default GrandFather

 

 

6. Father.jsx 에서는 이제 데이터를 전달해줄 필요가 없다

import React from 'react';
import Child from './Child';


function Father() {

  return (
    <Child />

  )
}

export default Father

 

 

7. Child.jsx

- FamilyContext와 useContext 를 import

- data 라는 변수에 useContext(createContext가 선언된 js 파일이름)

-나머지는 data.~ 을 통해 value값에 접근

import React from 'react';
import { FamilyContext } from '../context/FamilyContexts';
import { useContext } from 'react';

const style = {
  color: 'red',
  fontWeight: '900'
}

function Child() {

  const data = useContext(FamilyContext);
  console.log('data', data); // {houseName: houseName, pocketMoney:pocketMoney}
  
  // 구조분해할당으로 반드시 가져와야 함
  const {housename, pocketMoney} = useContext(FamilyContext);

  return (
    <div>나는 이 집안의 막내. 할아버지가 우리 집 이름은 <span style={style}>{data.houseName}</span> 이고, 용돈은 <span style={style}>{data.pocketMoney}</span>를 받았어요.</div>
  )
}

export default Child

 

 

 

useContext 사용 주의점

useContext를 사용할 때, Provider(이번 예시에서는 GrandFather.jsx)에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다.