리액트 공부 #3

얼마전 완성한 리액트 프로젝트를 회고 하면서 다음 리액트 프로젝트를 시작 하기 전,
리액트를 깊이있게 공부하고 싶어 적는 나의 리액트 공부.log

Reactjs.org의 공식 문서 중 MAIN CONCEPTS 를 다시 한번 천천히 살펴보자.

Context

리액트의 props의 단점은 타이핑이 많아져야 된다는 것이다. 공식 문서에서 예를 든것처럼 앱의 기본 언어, 테마, 유저 로그인 여부 등 전역변수로 사용하기 좋은 값들도 부모에서 자식으로 계속 내려줘야 한다. 이러한 단점을 해결할 수 있는게 Context다. Redux를 대체할 수 있는지도 생각해 보자.

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.

Before You Use Context

리액트 공부 #1 에서 Component Composition이 엄청 중요할 것 같다고 생각했는데, 공식 문서에도 다음과 같이 나와있다.

If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

컴포넌트를 잘 분할하는게 어렵지만, 잘 분할만 한다면 Context같은게 필요 없을지도 모른다.

잘 분할해도 해결되지 않는 경우, 아래 패턴을 봐보자.

function Page(props) {
  const user = props.user;
  const content = <Feed user={user} />;
  const topBar = (
    <NavigationBar>
      <Link href={user.permalink}>
        <Avatar user={user} size={props.avatarSize} />
      </Link>
    </NavigationBar>
  );
  return (
    <PageLayout
      topBar={topBar}
      content={content}
    />
  );
}

위 패턴을 사용하면 자식 컴포넌트가 부모 컴포넌트와 상호작용을 필요로 하는 경우, 자식 컴포넌트 자체를 부모 컴포넌트 안에서 만들어 props에 담아서 내려보낼 수 있다. 기억해 두면 유용할 것 같은 패턴이다.

Context.Provider

Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다.
Provider 하위에 또 다른 Provider를 배치하는 경우, 더 가까운 즉 하위 Provider의 값이 우선시됩니다.

Context.Consumer

Consumer의 자식은 함수여야 함. context의 현재 값을 받아 React 노드를 반환.

Updating Context from a Nested Component

하위 컴포넌트에서 Context 값을 변경하려면, Context안에 값을 변경하는 함수를 만든 후,
함수를 전달하여 Consumer에서 전달된 함수를 통해 context를 업데이트 하면 됨