Describing the UI ☞ Keeping Components Pure

https://react.dev/learn/keeping-components-pure 를 보고 정리한다.

 

컴포넌트를 순수 함수로만 작성하면 code base가 커짐에 따라 전체 클래스의 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다.

순수성

컴퓨터 과학에서 순수 함수는 아래와 같은 특징을 가진다.

• 자신이 할일만 신경쓴다. 함수가 호출되기 전의 다른 객체나 값을 변경하지 않는다.
• 동일한 입력을 받으면 동일한 결과를 출력한다.

React는 순수함수를 중심으로 설계되었다. React는 작성하는 모든 컴포넌트가 순수 함수라고 가정한다.

즉, 작성하는 React 컴포넌트는 동일한 입력이 주어지면 항상 동일한 JSX를 반환해야한다.

Side Effects(부수 효과): 의도하지 않은 결과

React의 렌더링 프로세스는 항상 순수해야 한다. 컴포넌트는 JSX만 반환해야하며 렌더링 전에 존재했던 객체나 변수를 변경해서는 안 된다.

• 모든 부수 효과는 렌더링 이후에 생성된다.

순수 함수가 아닌 경우의 예 중 하나는 외부에서 선언된 변수를 컴포넌트에 사용하는 경우이다. 이는 동일한 입력을 여러 번 받을 때 동일한 결과를 출력한다는 보장이 없다. 따라서 예측 불가능해진다.

이를 해결하기 위해 prop을 선언해서 사용하는 방법으로 수정할 수 있다.

일반적으로 컴포넌트가 특정 순서로 렌더링될 것을 기대하면 안되며, 모든 컴포넌트가 서로 독립적으로 해결되어야한다.

• 렌더링은 언제든지 발생할 수 있으므로 구성 요소는 서로의 렌더링 순서에 의존하지 않아야 합니다.

StrictMode로 순수하지 않은 계산 감지하기

React는 개발 중에 각 구성 요소의 기능을 두 번 호출하는 "Strict Mode"를 제공합니다. 구성 요소 함수를 두 번 호출함으로써 Strict Mode는 이러한 규칙을 위반하는 구성 요소를 찾는 데 도움이 됩니다.

순수 함수는 계산만 하므로 두 번 호출해도 아무 것도 변경 되지 않습니다.

StrictMode는 production에 영향을 미치지 않으므로 사용자의 앱 속도를 늦추지 않습니다. StrictMode를 선택하려면 루트 구성 요소를 <React.StrictMode>로 감싸면 된다.. 일부 프레임워크는 기본적으로 이 작업을 수행합니다.

Local mutation: 컴포넌트의 작은 비밀

순수 함수는 함수 범위 밖의 변수나 호출 전에 생성된 객체를 변경하면 안됩니다.

그러나 렌더링하는 동안 로컬 변수와 개체를 만들고 이를 변경하는 것은 전혀 문제가 없습니다. 이를 'local mutation'이라 부른다.

Side Effects를 일으킬 수 있는 곳

함수형 프로그래밍이 함수의 순수성에 크게 의존하지만, 우리는 결국 동적인 UI를 위해 Side Effects를 일으켜야한다.

• 화면 업데이트
• 애니메이션 시작
• 데이터 변경...

이는 렌더링 중이 아닌 "on the side(측면)"에서 발생한다.

React에서 side effects는 보통 event handlers 통해 발생한다. Event handlers는 컴포넌트 내부에 정의되어 있지만 렌더링 중에는 실행되지 않는다. 따라서 event handler는 순수할 필요가 없다.

event handler만으로 side effect를 붙이기 어려운 경우, useEffect 호출을 이용할 수 있다. 이는 렌더링 후에 실행해야할 side effect를 지정할 수 있다. 그러나 이 방식은 최후의 수단이여야 한다.

 

React가 순수성에 대해 관심을 가지는 이유?

순수 함수는 놀라운 기회을 제공합니다.

• 컴포넌트는 다른 환경(서버...)에서 실행될 수 있다.
  • 동일한 입력에 대해 동일한 결과를 반환하기 때문에 하나의 컴포넌트가 많은 사용자 요청을 처리할 수 있다.
• 같은 입력을 가진 컴포넌트에 대한 렌더링을 skip함으로써 성능을 향상시킬 수 있다.
  • 순수 함수는 항상 동일한 결과를 반환하므로 캐시하는 것도 안전하다.
• 깊은 컴포넌트 트리를 렌더링하는 도중 일부 데이터가 변경되면, React는 낭비 되는 시간(지난 렌더링을 끝내는 시간)없이 렌더링을 다시 시작할 수 있다.
  • 순수 함수는 언제나 안전하게 계산을 중단할 수 있다.

 

모든 React 기능은 순수성을 활용한다.

데이터 가져오기에서 애니메이션, 성능에 이르기까지 컴포넌트를 순수하게 유지하면 React 패러다임의 힘이 발휘될 것이다.

 

Challeges

해결책과 다른 방법으로 해결하였을 경우, 기록합니다.

 

3번 : Fix a broken story tray

문제 원인 : prop으로 받은 stories를 건드렸다.

문제 해결 : prop을 건드리지 않기 위해 해당 내용을 복사한 변수를 생성하고, 여기에 추가할 내용을 push한다.

export default function StoryTray({ stories }) {
  const curStories = [...stories];
  curStories.push({
    id: 'create',
    label: 'Create Story'
  });

  return (
    <ul>
      {curStories.map(story => (
        <StoryItem story={story}></StoryItem>
      ))}
    </ul>
  );
}

function StoryItem({ story }) {
  return (
    <li key={story.id}>
      {story.label}
    </li>
  )
}