3. React

학습 키워드

• React란?

• 컴포넌트

• 리렌더링

• IoC(Inversion of Control)

• Library vs Framework

재조정

트리의 같은 위치에 있는 엘리먼트 타입이 이전 렌더링과 다음 렌더링 사이에 일치하면

React는 기존 호스트 객체를 다시 사용.

// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="blue" />,
  document.getElementById('container')
);

// 호스트 객체를 다시 사용할 수 있을까요? 네! (button → button)
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById('container')
);

// 호스트 객체를 다시 사용할 수 있을까요? 아뇨! (button → p)
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <p>Hello</p>,
  document.getElementById('container')
);

// 호스트 객체를 다시 사용할 수 있을까요? 네! (p → p)
// domNode.textContent = 'Goodbye';
ReactDOM.render(
  <p>Goodbye</p>,
  document.getElementById('container')
);

제어의 역전

왜 직접 컴포넌트를 호출하지 않는 거지? 왜 Form() 대신 <Form />이라고 써야 하는 거야?

React는 React가 컴포넌트에 대해 아는 것이 재귀적으로 호출한 React 엘리먼트 트리만 보는 것보다 효율적으로 처리할 수 있다.

// 🔴 React는 Layout이나 Article이 존재하는지 모릅니다.
// 컴포넌트를 직접 호출합니다.
ReactDOM.render(
  Layout({ children: Article() }),
  domContainer
)

// ✅ React는 Layout과 Article의 존재를 알게 됩니다.
// React가 컴포넌트를 호출합니다.
ReactDOM.render(
  <Layout><Article /></Layout>,
  domContainer
)

1. 컴포넌트는 함수 이상의 역할을 한다. react는 상호 작용에 대한 응답으로 UI트리를 렌더한다. 컴포넌트를 직접 호출하면 이 기능을 직접 구축해야한다. 추상화를 제공한다고 볼 수 있다.

2. 컴포넌트 타입으로 재조정. 트리의 개념 구조를 더 많이 알려줄 수 있다.

3. react가 재조정을 지연할 수 있다. 브라우저가 컴포넌트 호출 사이에서 일부 작업을 할 수 있게되어 큰 컴포넌트 트리를 다시 렌더링 하더라도 메인 스레드를 멈추지 않게 할 수 있다. 이를 수동으로 조율할 필요없다.

4. 디버깅 컴포넌트가 일급 객체라면 나은 개발 도구를 만들 수 있다.

마지막 이점은 지연 평가이다.

지연평가

// (2) 나중에 계산됩니다.
eat(
  // (1) 먼저 계산됩니다.
  prepareMeal()
);

컴포넌트로 표현하면 자바스크립트 어딘가에서 사용되기 전까지 실행되지 않는다.

조건에 따라 함수를 일찍 종료시킬 수 있다.

function Page({ user, children }) {
  if (!user.isLoggedIn) {
    return <h1>Please log in</h1>;
  }
  return (
    <Layout>
      {children}
    </Layout>
  );
}

함수를 직접 호출하면 page 컴포넌트가 그리길 원치 않아도 즉시 실행됨.

// {
//   type: Page,
//   props: {
//     children: Comments() // 항상 실행됩니다!
//   }
// }
<Page>
  {Comments()}
</Page>

결론적으로 컴포넌트로 작성하면 react가 호출 시점을 결정할 수 있다.

불필요한 렌더링을 피하고 코드의 취약성을 줄일 수 있다.

setState 호출은 즉시 렌더링을 발생시키지 않는다.

불필요한 렌더링을 하지 않도록.

일괄 갱신은 성능에 좋지만 아래와 같은 코드는 문제가 된다.

  const [count, setCounter] = useState(0);

  function increment() {
    setCounter(count+1);
  }

  function handleClick() {
    increment();
    increment();
    increment();
  }

이 코드는 세번의 setCount(1)을 호출해버린다.

문제를 해결하기 위해 갱신 함수를 인자로도 받는다.

  const [count, setCounter] = useState(0);

  function increment() {
    setCounter(c => c + 1);
  }

  function handleClick() {
    increment();
    increment();
    increment();
  }

React는 갱신 함수들을 큐에 쌓아놓고 나중에 순서대로 실행한다.

count 결과는 3이다.

상태 로직이 복잡해진다면 지역 상태를 useReducer 훅으로 사용하길 권장한다.

const [counter, dispatch] = useReducer((state, action) => {
    if (action === 'increment') {
      return state + 1;
    } else {
      return state;
    }
  }, 0);

  function handleClick() {
    dispatch('increment');
    dispatch('increment');
    dispatch('increment');
  }

호출 트리

React는 JS 콜스택과 따로 내부적인 자체 콜스택이 있다.

현재 렌더링 하고있는 컴포넌트를 기억하기 위한.

React의 UI 트리들은 상호작용 하기위해 계속 살아있어야 한다.

DOM은 첫 번째 React.DOM.render() 호출 후 사라지지 않는다.

컨텍스트

모든 컴포넌트와 깊은 자식에 props를 전달하는것은 번거롭다.

컴포넌트를 위한 동적 스코핑의 정수.

const ThemeContext = React.createContext(
  'light' // 기본값
);

function DarkApp() {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponents />
    </ThemeContext.Provider>
  );
}

function SomeDeeplyNestedChild() {
  // Depends on where the child is rendered
  const theme = useContext(ThemeContext);
  // ...
}

SomeDeeplyNestedChild가 렌더링 될 때 useContext(ThemeContext)은 트리에서 가장 가까운 부모

<ThemeContext.Provider>를 찾고 value를 사용합니다.

트리에서 ThemeContext.Provider를 찾지 못했다면 useContext(ThemeContext)는

createContext() 호출에 명시된 기본값을 사용. 위 예제에서는 'light'

useEffect

useEffect의 Dependency array를 이용해 최적화를 하는데

JS 클로저에 익숙하지 않으면 성급한 최적화 문제가 발생할 수 있다.

function handleChange() {
    console.log(count);
  }

useEffect(() => {
    DataSource.addSubscription(handleChange);
    return () => DataSource.removeSubscription(handleChange);
  }, []);

handleChange가 바뀌더라도 다시 실행되지 않는데,

handleChange는 다른 props나 상태를 참조할 수 있다.

갱신을 허용하지 않는다면 handleChange는 계속 첫번째 렌더링에 있는 상태를 참조해

count는 내부에서 항상 0이 된다. 아래처럼 의존성 배열에 추가해준다.

useEffect(() => {
    DataSource.addSubscription(handleChange);
    return () => DataSource.removeSubscription(handleChange);
  }, [handleChange]);

코드에 따라 렌더링 할 때마다 필요없는 HandleChange 때문에 필요 없는 구독이 발생하면

useCallback 훅으로 해소할 수 있다.

Custom hook

컴포넌트 사이에 상태가 있는 로직을 재사용할 수 있게 함.

상태는 컴포넌트별로 독립적 (훅을 호출할 때마다 격리된 상태를 선언함)

function MyResponsiveComponent() {
  const width = useWindowWidth(); // 커스텀 훅
  return (
    <p>Window width is {width}</p>
  );
}

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  return width;
}

React 는 라이브러리인가, 프레임웤인가 (쓸데없음)

제어의 역전을 이용해 상태와 업데이트가 얽힌 복잡한 상황을 간단히 선언형 UI로 구성하는게 Framework의 주요 특징.

아무도 매번 root를 render하는 방식으로 쓰지 않는다.

프레임웤이자 라이브러리.

참고

React는 컴포넌트를 언제 다시 리렌더링 할까요?

React 렌더링 동작에 대한 (거의) 완벽한 가이드