React의 순수성 유지하기 (React's purity)

컴포넌트를 Pure, 즉 순수하게 작성하면 프로젝트의 코드 베이스가 커지더라도 사이드 이펙트를 피할 수 있다.

자세한 이유와 방법을 알아보자.

 

why?

1. 컴포넌트는 서버와 같은 다른 환경에서 실행 가능하다. 동일 입력 - 동일 결과에 따라, 하나의 컴포넌트는 수많은 유저의 요청을 처리할 수 있다.

2. input이 변경되지 않았을 때에는 캐싱된 것을 가져오기에 렌더링을 하지 않아 성능을 향상할 수 있다.

3. 렌더링을 하다가 값이 중간에 바뀌었을 때 렌더링이 다시 시작되는 비효율이 발생한다. 이는 특히 컴포넌트 트리가 깊을 때 문제인데, 순수 함수는 이를 막을 수 있다.

 

순수 상태를 깨트리지 않기 위해 주의할 것

1. same input 그리고 same output

수학 공식처럼 y=2x 일 때, x가 3이면 y는 항상 6이다.

이와 마찬가지로 항상 같은 JSX를 반환해야 한다.

 

2. 화면을 업데이트하기 위해선 "setState" 사용하기

컴포넌트 렌더링 시, props, state, context와 같은 사용자 입력을 변형하면 안된다. 하지만 화면을 업데이트하려면 기존 객체가 아닌 "setState"를 통해 처리한다.

 

3. 함수 스코프 밖의 변수/객체를 변경하지 않기

// App.js
let guest = 0;

function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}

지역 변수가 아닌 컴포넌트의 렌더링 이전에 존재하는 것은 변경하지 않는다.

guest 와 같은 변수는 property로 값을 받아 처리한다.

 

 

---

 

Cf. React 공식문서

https://react.dev/learn/keeping-components-pure

Keeping Components Pure – React

https://react.dev/reference/rules/components-and-hooks-must-be-pure

Components and Hooks must be pure – React