Keeping Components Pure

일부 JavaScript 함수는 순수하다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않는다. 컴포넌트를 순수함수로만 작성하면 코드가 커짐에 따라 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있다.

 

 

순수: 공식으로써의 컴포넌트

순수함수는 다음과 같은 특성을 가진 함수이다.

• 자신의 일만 생각한다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않는다.
• 동일한 입력, 동일한 출력. 동일한 입력이 주어지면 항상 동일한 출력을 반환해야 한다.

 

 

의도하지 않은 결과

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

 

다음은 이 규칙을 위반하는 컴포넌트이다.

 

컴포넌트 밖에서 선언된 guest를 컴포넌트가 읽고 쓰고있다. 즉, 이 컴포넌트를 여러번 호출하면 다른 JSX가 생성된다.

 

 

대신 props로 전달하여 한 input에 대한 항상 동일한 output을 얻는 순수함수로 구성할 수 있다.