[CHAM] 하위 컴포넌트에서 값 받아오기, 주기

하위 컴포넌트에서 set함수를 받아 부모 컴포넌트의 state값을 변경해주려고 한다.

redux를 이용하면 너무 양이 많아질것 같고 props로 넘기기엔 부모와 자식간의 사이에 컴포넌트들이 많았다.

그래서 좀더 효율적인 방법이 없을까 고민하다가 useContext라는 훅을 찾아냈다.

 

1. useContext

useContext는 부모에서 하위컴포넌트로 값을 전달할 수 있다.

기존 props와 다른 점은 중간다리 역할이 없어도 멀리 있는 하위 컴포넌트에 곧바로 전달할수 있다는 점이었다.

이를 사용하면 redux관리, props관리도 쉬울것 같아서 useContext를 쓰기로 생각했다.

 

2. useContext 사용법

(1) : useContext로 데이터 보내기

useContext에서 전달하는 값은 '객체'이다.

먼저 Context객체를 만들어 export해서 내보낸다.

import { useContext } from "react";
export const MakeReview = createContext();

그 다음 선언한 변수로 컴포넌트를 만들고 value값을 전달해준다. 이때 .Provider를 붙여 주어야 한다.

<MakeReview.Provider key={2} value={{ setReview, setReviewData }}>
  <MyPageOrder />
</MakeReview.Provider>

(2) : useContext로 데이터 받기

컴포넌트 불러오기

import { useContext } from "react";
import { MakeReview } from "../../MyPageModal";

전달받은 데이터 불러오기

const { setReview, setReviewData } = useContext(MakeReview);

useContext는 훅이므로 함수안에 작성해야 한다.