[React hooks] useContext란..?

개요

useReducer에 이어서 뒤늦게 작동원리를 이해한 기능이다.

잊어먹기전에 어느정도 기록해두자

---

useContext를 쓰는 이유

prop driling를 해결해준다. prop driling은 부모 컴포넌트로부터 자식 컴포넌트에게 prop을 넘겨주는것을 말하는데, 거쳐가야하는 컴포넌트가 많아질수록 코드 작성도 번거로워진다. 이때 useContext로 prop을 관리해주면

부모안에 있는 어떤 컴포넌트든 그 값에 접근할 수 있다.

---

Context 생성

//App.js
import User from './User';
import React, { createContext, useState } from 'react';

export const UserContext = createContext(null);

function App() {
  const [num,setNum] = useState(0);
  
  return (
    <UserContext.Provider value={{name:"sungtt입니다",age:"200살입니다.", num:num, setNum:setNum}}>
     <User/>
  </UserContext.Provider>
  
  );

}

export default App;

1. createContext를 호출해서 Context를 생성한다.. 인자는 useState처럼 기본값을 설정하는곳이다.

2. Provider란 생성한 Context의 value를 변경해주는 기능을한다. 옵션을 통해 자식 컴포넌트에게 넘겨줄 데이터를 정할 수 있다. 

3. prop을 전달해줄 컴포넌트들을 context.Provider로 감싸준다.

 

Context 사용 1

import React, { useContext } from "react";
import {UserContext} from "./App";
import User2 from './User2';

const User = () => {
    const Userinfo = useContext(UserContext);
    return(
        <div>{Userinfo.name}<p>{Userinfo.age}</p>
             <User2/>
        </div>
    )
}

export default User;

1. useContext로 생성한 context값을 사용할 수 있다.

2. context를 생성한 컴포넌트를 import 시켜준다.

3. 자식컴포넌트에 context객체를 할당해준다. 

4. Provider value에 담긴 값들을 사용할 수 있다.

 

Context 사용 2

import { UserContext } from "./App";
import React from "react";

const User2 = () => {
    const {num, setNum}= React.useContext(UserContext);
    const plus = () => {
        setNum(num + 1)
    }

    return(
        <>
        <h2>{num}</h2>
        <button onClick={plus}>더하기</button>
        </>
    )
}

export default User2;

1. 이번엔 React로 접속하여 useContext hook을 사용했다.

2. 구조분해할당을 통해 필요한값을 빼온다. 이러면 번거롭게 context명을 붙여야하는 수고를 덜 수 있다.

3. 상태값을 변경하여 컴포넌트를 렌더링시킨다.

---

정리

0. prop을 어떤 자식 컴포넌트든 단번에 접근가능하게 해준다. (prop driling 방지)

 

1. createContext로 context를 생성한다.

 

2. context.Provider로 컴포넌트를 감싸주고 value로 값을 전달해준다.

 

3. useContext를 통해 context값을 사용할 수 있다.