[Next.js] props를 바로 넘기는방법에 대해 알아보자(Feat.useContext)

리액트를 하다보면 부모 와 자식간에 props를 넘길 일이 많은데,

부모 밑에 직계자식만 있는 것이 아닌

Master -> slave1 -> slave2 -> slave3 -> ... 뭐 이런식으로

중간 단계가 많은 경우가 있는 데,

​

내가 사용할 곳은 slave3 단계에서만 필요한데 Master 에서 선언할 경우

단계별로 Props를 다 넘겨야 되니 여간 귀찮은 게 아니다.

​

그럴 때를 대비하여 React Hooks 에서 UseContext API 를 갖춰놓았으니,

활용해보도록 하자.

​

나는 타입스크립트 환경이므로 각자 환경에 맞는 문법을 찾아 사용해보자.

​

1. Master.tsx

import { useState, createContext } from "react";

export const calcDataContext : any = createContext('');  

const Master = (props: any) => {
   var machineData = 'Machine-01';
   var mainData = 'Factory-01';
    const calcData = {
      machineData,
      mainData,
    }

 return (
     <calcDataContext.Provider value={{calcData}} >
        <Master />
      </calcDataContext.Provider>

 )
}
export default Input;

​

 

코드를 보면 알겠지만 최상위단을 useContext.Provider 로 감싸준다.

이렇게 해줌으로 써 Master의 자식들은 Master의 값을 호출할 수 있다.

​

2. Slave1.tsx (코드를 작성하지 않으므로 생략 - 중간단계)

​

3. Slave2.tsx (코드를 작성하지 않으므로 생략 - 중간단계)

​

4. Slave3.tsx (목표지점)

​

import { calcDataContext } from "../..";
import { useContext } from "react";

const Slave3 = ({  
}: any) => {
 const data : any = useContext(calcDataContext);
    return (
     <>
        <h1>{data.calcData.machineData}</h1>
        <h2>{data.calcData.mainData}</h2>
     </>
    ) 
}
export default withResizeDetector(Slave3);

사용하고 싶은 자식 소스단에서 부모의 useContext 를 호출하여 값을 활용할 수 있다.

변수뿐만 아니라 함수같은 것들도 같이 호출할 수 있으므로, 잘 활용하면 매우 편하다는 것을 알 수 있다.

​

앞으로는 useContext 를 활용하여

Props를 꼭 필요한 곳에서만 호출하여 쓰자!

​