리액트 공부 #2

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

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

Inline If with Logical && Operator

Conditional Rendering을 할때, 나는 대부분 condition ? true : false를 사용했다.
하지만 이런 방법도 있다는 걸 참고하자
condition && expression
true일때만 expression 이 출력된다.

//Inline If with Logical && Operator 예제

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

Composition

리액트는 상속 대신 Composition(합성)을 통해 컴포넌트의 유연한 재사용을 권장한다. props를 통해 어떠한 형태든 전달할 수 있다는 것이 이를 가능하게 만든다.

props.children

Dialog나 Sidebar 같은 컴포넌트를 만들 때, 자식 Elements가 어떤 형태로 들어올지 모르는 경우가 많다. 이런 경우 children prop을 사용하는 것이 좋다.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

와우 너무 좋다. FancyBorder 컴포넌트의 자식들은 모두 props.children으로 전달되기 때문에 위 예제처럼 활용하면 된다. 문서에 나온 다음 예제도 너무 좋다.

Own convention

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

물론 위 예제를 <LeftPane />과 <RightPane />으로 컴포넌트를 나누어 각각 <Contacts />와 <Chat />으로 나누어도 될 듯한데 분명 위 처럼 props에 나만의 Convention 을 만들어 사용하는 것이 효과적일 때가 있을 것 같다.

Thinking in React

Step 1: Break The UI Into A Component Hierarchy

목업을 바탕으로 어떤 파트를 컴포넌트로 해야 할지 정하기 전, 모든 구성요소를 나누어 보자. 그다음 컴포넌트의 기본 원리: 컴포넌트는 한가지만 해야 한다를 기억하여 컴포넌트를 나누자.

Step 2: Build A Static Version in React

state를 사용하지 않는 정적인 버전을 먼저 구현해 보자.
top-down방식과 bottom-up 방식 둘 중 하나를 선택하여 앱을 구현하는데, 보통 큰 규모의 앱일수록 bottom-up 방식이 더 개발하기 쉽다.

Step 3: Identify The Minimal (but complete) Representation Of UI State

상호작용하는 UI를 만들려면 state를 사용해야 한다. 어떤 데이터를 state로 할지를 결정할 때는 DRY: Don't Reapeat Yourself 원칙을 지켜야 한다.

Step 4: Identify Where your State Should Live

먼저 계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트를 찾고, 그 컴포넌트들의 상위에 있는 common owner component를 찾자. 쉽게 말해 계층 구조 상 제일 위에 있는 컴포넌트를 찾자는 것이다. 만약 없다면 하나 만들자.

Step 5: Add Inverse Data Flow

State가 어디에 있었는지 생각해보자. 제일 상위 컴포넌트(common owner component)에 있었다. 그런데 아래 컴포넌트에서 state를 바꿀 일이 있다면?
onInputChange() 와 같은 메소드를 props로 넘겨 state변경을 처리해야 한다. 이게 공식문서 말대로 데이터 흐름을 파악하긴 좋지만 state를 변경하는 메소드를 props로 넘기고 넘기고.. 하는게 귀찮기도 하지만, 헷갈린다. ㅠ Redux 없이 큰 규모의 프로젝트를 하게 된다면, Step 1에서 구조 짜는 것을 정말 잘 해야 할 듯하다. 너무 많은 state를 관리하는 Component를 만들어도 힘들다.