[React] 컴포넌트의 순수함 : 컴포넌트는 순수해야한다.

컴포넌트의 순수함

리액트에서 컴포넌트는 순수해야한다.

여기서의 "순수함" 이란 javascript에서의 순수함수와 동일한 의미로 아래 두 가지를 지켜야한다.

• 자신의 일에 집중한다. : 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않아야한다.
• 같은 입력, 같은 출력 같은 입력이 주어졌다면 같은 결과를 반환해야 한다.

 

리액트는 컴포넌트가 순수하다는 것을 전제로 동작한다.

때문에 개발자는 컴포넌트를 같은 입력에 대해서 같은 결과를 내놓도록 작성해야한다.

 

특히 컴포넌트 외부의 변수나 함수를 수정하지 않는 것이 중요하다.

 

또한 컴포넌트가 특정 순서로 렌더링 되리라 기대하면 안된다. 

즉, 각 컴포넌트가 렌더링 중에 다른 컴포넌트에 의존하면 안되고 자체적으로 JSX를 연산해야한다.

 

나쁜 예시

let guest = 0;

function Cup() {
  // 나쁜 지점: 이미 존재했던 변수를 변경하고 있다!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

 

컴포넌트가 순수해야하는 이유

리액트는 컴포넌트가 순수할 것이라고 가정한 채 페러다임을 짰다.

그렇기에 컴포넌트가 순수함을 가져야만 성능상으로도 이점이 있으며 react의 기능을 제대로 활용할 수 있게 된다.

 

공식문서에서는 크게 아래와 같은 이유를 소개하고 있다.

• 컴포넌트는 서버 등의 다른 환경에서도 실행될 수 있다. 
  • 동일한 입력에 대해서 동일한 결과를 반환하기 때문에 하나의 컴포넌트는 많은 사용자 요청을 처리할 수 있게 된다.
• 입력이 변경되지 않은 컴포넌트는 렌더링을 건너뛸 수 있다.
  • 캐싱, 메모이제이션 등을 활용할 수 있게 된다.
• 깊은 트리를 렌더링하는 중 일부 데이터가 변경되면 중간에 중단하고 다시 렌더링을 시작할 수 있다.
  • 만약, 순수하지 못하다면 렌더링을 다 끝낸 후 변경된 상태 값을 가진 채 렌더링을 다시 해야할 것이다.

 

Props, State, Context

추가로 리액트에는 렌더링 과정 중에 읽을 수 있는 3가지 입력 요소가 있다.

props, state, context가 그것이다.

 

이 3가지 요소는 항상 "읽기전용" 으로 동작해야하며 개발자는 이것을 수정해서는 안된다.

예를 들어 <pre>const [value, setValue] = useState(0)</pre> 가 있을 때 value를 업데이트하기 위해서는 setValue를 이용해야지 <pre>value =</pre> 의 연산을 사용해서는 안된다.

 

예외 : 이벤트 핸들러

이벤트 핸들러가 컴포넌트 내부에 정의되어있다 할지라도 렌더링 과정 중에는 실행되지 않기 때문에

이벤트 핸들러는 순수하지 않아도 된다.

 

---

참고

리액트 공식문서 : https://ko.react.dev/learn/keeping-components-pure

컴포넌트 순수하게 유지하기 – React