[React] Props를 Context로 변경해보기

01. props만이 방법이 아니다!

---

보통 컴포넌트에 데이터를 넘겨줄 때 props를 통해 넘겨준다.

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달해주려면 props로 값을 넘겨주고 자식 컴포넌트는 props를 통해 받은 데이터를 사용한다. 자식의 자식 컴포넌트도 마찬가지이다.

부모 컴포넌트는 자식에게 props를 통해 데이터를 넘겨주고,
자식은 또 자식에게 props를 통해 데이터를 넘겨주게 되는 것이다.

작은 프로젝트에서 props 전달은 문제가 없다. 하지만 프로젝트가 커져서 부모가 n번째 자손에게 넘겨줘야 한다면 n-1개의 자손에게 props를 사용하여 전달하게 된다.
어떻게 보면 전달을 위한 전달이라고 할 수도?

계속해서 불필요한 props를 사용하게 되고 의미없는 값들이 컴포넌트들을 스쳐가게 된다.

이때 사용하는 것이 바로 context이다.

context는 props를 사용하지 않고 데이터를 전달하도록 해준다.

props를 사용하지 않고 n번째 자손에게 직접 데이터를 건네준다. n-1개의 자식을 통과하여 n번째 자식에게 데이터를 전달하지 않아도 부모에서 바로 n번째 자식에게 값을 전달할 수 있게 된다.

context는 props에 대한 전역 데이터 저장소라고 할 수 있다.

import React from "react";

const App = () => {
  return (
    <Greeting value={{ name: "Jane", id: "JaneIsFree" }} />
  );
};

// App의 자식에게 props로 데이터 전달
const Greeting = (props) => {
  const id = props.value.id;
  const name = props.value.name;
  return (
    <div>
      <h2>{id}</h2>
      <strong>{name}</strong>
      <GreetingTwo value={{ id, name }}/>
    </div>
  );
};

// App의 자식의 자식에게 props로 데이터 전달
const GreetingTwo = (props) => {
  const id = props.value.id;
  const name = props.value.name;
  return (
    <div>
      <h2>Two : {id}</h2>
      <strong>Two : {name}</strong>
    </div>
  );
};

export default App;

02. Props를 Context로 바꿔보기

---

1) Context 생성

// createContext 추가
import React, { createContext } from "react";

// createContext로 context 생성
const UserInfo = createContext({ name: "Jane", id: "JaneIsFree" });

const App = () => {
  return (
    // <Greeting value={{ name: "Jane", id: "JaneIsFree" }} /> // 데이터 밖으로 꺼내기(전역)
    <Greeting />
  );
};

// App의 자식에게 데이터 전달
const Greeting = () => {
//   const id = props.value.id;
//   const name = props.value.name;
  return (
    // Context.Consumer 형식으로 감싸줌
    <UserInfo.Consumer>
        {(value) => (
            <div>
                <h2>{value.id}</h2>
                <strong>{value.name}</strong>
                <GreetingTwo/>
            </div>
        )}
    </UserInfo.Consumer>
  );
};

// App의 자식의 자식에게 데이터 전달
const GreetingTwo = () => {
//   const id = props.value.id;
//   const name = props.value.name;
  return (
    <UserInfo.Consumer>
        {(value) => (
            <div>
                <h2>Two : {value.id}</h2>
                <strong>Two : {value.name}</strong>
            </div>
        )}
    </UserInfo.Consumer>
  );
};

export default App;

2) Context.Provider로 값 변경

import React, { createContext } from "react";

const UserInfo = createContext({ name: "Jane", id: "JaneIsFree" });

// Greeting을 UserInfo.Provider로 감싸서 값을 전달하면
// consumer로 전달되는 value 값이 바뀜
const App = () => {
  return (
    // .Provider에 value를 꼭 넣어야 함(안 넣으면 에러 발생 )
    <UserInfo.Provider value={{ name: "Aaron", id: "ImAaron" }}>
        <Greeting />
    </UserInfo.Provider>
  );
};

const Greeting = () => {
  return (
    <UserInfo.Consumer>
        {(value) => (
            <div>
                <h2>{value.id}</h2>
                <strong>{value.name}</strong>
                <GreetingTwo/>
            </div>
        )}
    </UserInfo.Consumer>
  );
};

const GreetingTwo = () => {
  return (
    <UserInfo.Consumer>
        {(value) => (
            <div>
                <h2>Two : {value.id}</h2>
                <strong>Two : {value.name}</strong>
            </div>
        )}
    </UserInfo.Consumer>
  );
};

export default App;

03. Props와 Context 특징

---

props

• 자식에 전달되는 값이 자기 자신이나 부모에서 관리되기 때문에 변수관리가 복잡하지 않음
• 어디서 문제점이 생겼는지 순차적으로 따라가며 확인할 수 있음

context

• 전역에서 관리되기 때문에 변수가 많아질 경우 관리하기 어려움
• 문제가 생겼을 때 순차적으로 따라가며 확인하는 것이 아니라 해당 컴포넌트로 바로 가서 수정 가능