props없이 state값을 사용하게 된 건에 대하여 (context API)

컴포넌트 안에 컴포넌트 안에 컴포넌트 안에 컴포넌트 안에...(살려줘) 이렇게 컴포넌트가 여러 개 중첩되어 있으면 그만큼 props로 한 단계씩 state값을 전달하면 된다. 하지만 이 컴포넌트들끼리 서로 state값을 공유할 순 없는걸까? 그럴 땐 context API가 있다.

1. 범위 생성

   let userNameContext = React.createContext()
   //이 '범위'를 다른 파일에서 사용하려면 이걸 export한 다음, 필요한 파일에서 import하여 사용하면 된다.

2. state 값을 공유할 부분을 아래처럼 감싸기

<userNameContext>
  <div>
    <Box></Box>
    <Card></Card>
  </div>
</userNameContext>

3. 공유한 값이 필요한 컴포넌트에 가서 아래처럼 사용한다.

   let user = useContext(userNameContext);

이렇게 props 없이도 state 값을 사용할 수 있다.

그런데 이게 좀 복잡해서 차라리 컴포넌트를 적게 만들어서 props를 사용하는 것을 선호하는 사람도 있다고 한다. 간편하게 값을 전달할 수 있다면 props가 제일 나은가 보다.