1-6 React Hooks - useContext

context란 전역적으로 사용되는 어떠한 것을 표현할때 많이 쓰인다. 사전적의미: 맥락 문맥
useContext의 필요성
부모컴포넌트-자식컴포넌트로 데이터를 전달해줄때 props를 사용했다.
그런데 컴포넌트의 관계가 너무 많이 쌓인채 데이터를 전달해주다보면 prop drilling현상이 일어나게 된다.

prop drilling의 문제점은
1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워진다.
2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없다.

그래서 등장한것이 바로 react context API 라는 것이며, useContext hook을 통해 쉽게 전역데이터를 관리할 수 있게 되었다.

context API 필수 개념

createContext: context 생성(context 객체를 만든다)
Consumer: context 변화 감지
Provider: context 전달(to 하위 컴포넌트)

일단 GrandFather.jsx파일, Father.jsx파일, Child.jsx파일을 src안의 components폴더안에 생성한다.
그리고 src안에 context폴더를 만든후 그 안에 만든

FamilyContext.js라는 파일에서

import {createContext} from "react";

export const FamilyContext = createContext(null);

를 생성해준다(초기값은 null).

GrandFather.jsx파일로 가서,

FamilyContext.js파일에서 만들었던 const FamilyContext = createContext(null);을 이용해서
<FamilyContext>를 만들어 <Father />를 감싼다. 그리고 <FamilyContext>태그 안에 .Provider를 추가해서 하위컴포넌트로 context를 전달시키도록 한다.
그리고 value={{}}안에 객체형식으로 그 context들을 넣어준다.

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

function GrandFather() {
    const houseName = "스파르타";
    const pocketMoney = 10000;

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

export default GrandFather

Father.jsx 파일은 중간에서 context전달을 거치지 않기때문에 관계만 남는다.

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

function Father() {
  return (
    <Child />
  )
}

export default Father

Child.jsx파일에선 useContext와 FamilyContext를 import한다.
받은 context를 data라고 해보고 const data = useContext(FamilyContext);
console.log(data);를 해보면 {houseName: '스파르타', pocketMoney: 10000} 와 같이 객체형태로 들어오는걸 볼 수 있다.

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

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

function Child() {
    const data = useContext(FamilyContext);
    console.log("data", data)
  return (
    <div>나는 이 집안의 막내예용<br/>
    </div>
  )
}

export default Child

이제 그 data를 본문에 녹여서 각각의 context들을 확인해보자.

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

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

function Child() {
    const data = useContext(FamilyContext);
  return (
    <div>나는 이 집안의 막내예용<br/>
    할아버지께서 우리 집 이름은 <span style={style}>{data.houseName}</span>라고 하셨어요.<br/>
    게다가 용돈도 <span style={style}>{data.pocketMoney}</span>원 만큼이나 주셨어요!
    </div>
  )
}

export default Child

여기서 명심해야할 것은 받은 data는 props로 내려온값을 쓴게 아니라 context를 이용해서 값을 받아온것이라는걸 알아야한다.

또 주의해야할 사항으로
context가 좋다해서 마구잡이로 쓰면 안된다고한다.
이유는 렌더링 문제때문
useContext를 사용할 때, Provider에서 제공한 value가 달라진다면, uesContext를 사용하고 있는 모든 컴포넌트가 리렌더링된다.
따라서 value부분을 항상 신경써줘야 한다.
(그 대안으로 메모이제이션이 있다고한다.)