React 컴포넌트 간 통신

오늘은 컴포넌트 간의 통신방법과 전역에서 값을 전달 해줄수 있는 Context API에 대해서 정리하려고 한다.

export default function A() {
  const [value, setValue] = useState("아직 안 바뀜");
  const click = () => {
    setValue("E의 값을 변경");
  };
  return (
    <div>
      <B value={value} />
      <button onClick={click}>E의 값을 바꾸기</button>
    </div>
  );
}

function B({ value }) {
  return (
    <div>
      <p>여긴 B</p>
      <C value={value} />
    </div>
  );
}
...
function E({ value }) {
  return (
    <div>
      <p>여긴 E</p>
      <h3>{value}</h3>
    </div>
  );
}

위의 코드를 보면 useState()를 통해 넣어준 상태 값을 props를 통해 한층 한층 컴포넌트 사이에서 내려주는데, 이는 매우 불편하다. 특히 복잡한 컴포넌트의 구조를 가진 사이트를 만들때 말이다.

그래서 개발된 방식이 Context API 인데, 이는 props를 직접 위에서 아래로 혹은 아래에서 위에로 전달하지 않고, 컴포넌트 트리 전체에 특정 값을 전달하는 방법이다. 이런 전역적인 데이터를 제공하는 경우는 예를 들면, 로그인한 유저 정보, UI테마 등이 있다.

사용방법은 먼저

const PersonContext = React.createContext();

이렇게 Context 컴포넌트를 만든 다음,

    <PersonContext.Provider value={persons}>
      <App />
    </PersonContext.Provider>

전체를 아우르는 APP.js를 감싸주고, PersonContext 태그안에 값을 넣어주면 된다.

const persons = [
  { id: 0, name: "Mark", age: 39 },
  { id: 1, name: "Hanna", age: 28 },
];

이렇게 Values 라는 props에 객체 데이터를 할당하였다. 그리고 이렇게 넣어준 데이터를 원하는 곳에서 소비하는 된다.

export default function Example1() {
  return (
    <PersonContext.Consumer>
      {(value) => (
        <ul>
          {value.map((value) => (
            <ul>
              <li>{value.name}</li>
              <li>{value.age}</li>
            </ul>
          ))}
        </ul>
      )}
    </PersonContext.Consumer>
  );
}

아, 그리고 이상하게도 내가 깃의 래포의 올리려는 Hook 공부한 자료가 push가 안되어서, 정확히 말하면 git init이 안되어서 1시간 10분 정도 헤맸는데... 이 방법 저 방법 찾다가... (아마 일전에 안에서 깃을 사용한 적이 있는 것 ...), 갑자기 구글링에서 답을 찾아서 해결했다!!!
애러 메세지: Reinitialized existing Git repository in......

rm -rf .git 이 한 줄만 써서 강제로 삭제해주면 된다.