[React] 공식문서 주요 개념 10 ~ 12, HOOK 1 ~ 3정리

State 끌어올리기

• state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천

• 어떤 값이 props 또는 state로부터 계산될 수 있다면, 그 값을 state에 두는 걸 추천하지 x

합성 (Composition) vs 상속 (Inheritance)

어떤 자식 엘리먼트가 들어올 지 예상할 수 없는 컴포넌트

• 범용적인 "박스" 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.
• 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다.

children 대신 자신만의 고유한 방식으로 전달하기

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 />
      } />
  );
}

• <Contacts />와 <Chat /> 같은 React 엘리먼트는 단지 객체이기 때문에 다른 데이터 처럼 prop으로 전달할 수 있다.

React로 사고하기

목업으로 시작하기

1. UI를 컴포넌트 계층 구조로 나누기

   • 모든 컴포넌트 주변에 박스를 그리고 각각에 이름을 붙이기
   • 단일 책임 원칙!

2. React로 정적인 버전 만들기

   • 정적인 버전을 만들기 위해 state를 사용하지 x
   • state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용한다.

3. UI state에 대한 최소한의 표현 찾아내기

   • 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 한다.
   • 핵심은 중복배제원칙
   • 애플리케이션이 필요로 하는 가장 최소한의 state를 찾기

4. State가 어디에 있어야 할 지 찾기

   • state를 기반으로 렌더링하는 모든 컴포넌트 찾기
   • 공통 소유 컴포넌트 찾기
   • 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
   • state를 소유할 적절한 컴포넌트를 찾지 못했다면 state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가하기

5. 역방향 데이터 흐름 추가하기

   • 리액트는 전통적인 양방향 데이터 바인딩과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와준다.

---

Hook의 개요

• Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. Hook 이전에는 render props나 고차 컴포넌트와 같은 패턴을 통해 재사용 가능한 로직을 붙이는 문제를 해결해왔다. 그러나 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며 코드의 추적을 어렵게 만든다.
• Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것
• Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 "연동(hook into)" 할 수 있게 해주는 함수

Effect Hook

• side effects : 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업
• 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.

Hook 사용 규칙

1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 실행하지 않기
2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. (+custom Hook)

useState

• useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어진다. 첫 번째 아이템은 현재 변수를 의미하고, 두 번째 아이템은 해당 변수를 갱신해주는 함수이다. 배열 구조 분해라는 특별한 방법으로 변수를 선언해주었기 때문에 [0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있다.