[React] useContext hook

useContext

하위컴포넌트들이 props 없이도 부모의 state 값을 사용할 수 있게 만들어주는 React Hook

 

하위 컴포넌트에 state값을 넘겨주려면 props를 사용하여 넘겨주는데

하위컴포넌트가 많을 경우 props를 계속적으로 선언해줘야 한다,

props를 사용하지 않고 useContext hook을 이용하여 state값을 넘겨주는 방법도 있다.

 

 

useContext 사용법

import React, { useState, useContext } from "react";

let dataContext = React.createContext();
let data = [
    {
        name: "Jay",
        age: 20
    }
]

1. 부모컴포넌트인 App() 위에 React.createContext()를 생성해준다.

 

function App(){
    let [userData, setUserDate] = useState(data);

    return(
        <div>
            <h1>Hello {userData[0].name}</h1>
            <dataContext.Provider value={userData}>
                <Info></Info>
            </dataContext.Provider>
        </div>
    )
}

 

2. Provider를 사용하여 같은 값을 공유할 컴포넌트의 범위를 감싸준다. 
<Contextname.Provider> </Contextname.Provider>

3. 감싼 Provider의 속성에 value={공유를 원하는 값}을 넣어준다.

=useState로 만든 userData를 공유하기 위해 해당 값을 넣어주었다.

 

 

function Info(){
    let userData = useContext(dataContext);
    return(
        <div>
            <p>Name : {userData[0].name}</p>
            <p>Age : {userData[0].age}</p>
        </div>
    )
}

4. Provider으로 감싼 컴포넌트의 상단에 useContext를 이용하여 공유 값을 선언해준다. 끝!

 

 

let userData = useContext(dataContext);

하위 컴포넌트가 또 있다면 해당 컴포넌트 상단에 위 코드를 계속 선언하면 해당 state를 사용할 수 있다.

(provider으로 상위 컴포넌트를 감싸 놓았기 때문)

 

 

Route를 해놓은 컴포넌트에 provider를 감싸고 싶다면?

<Route>
  <dataContext.Provider value={userData}>
    <Box />
  </dataContext.Provider>
</Route>

 

이렇게 Route안에 추가로 복사해서 감싸주면 된다.

 

다른 파일에서도 값을 공유하고 싶다면?

 

export let dataContext = React.createContext();  //App.js 상단


import {dataContext} from './App.js'  // 다른 폴더 상단

App()위에 선언한 React.createContext(); 를 export해주고
사용할 파일 안에서 선언해 주면 된다.

 

**

props를 사용하는것 말고 이러한 방법도 있다는 것을 알아두기 위해 정리 했지만 
컴포넌트 안에 하위컴포넌트가 아주 많을 경우가 아니라면
개인적으로 이 방법이 많이 편해보이지는 않는다.ㅋㅋ