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

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/keeping-components-pure

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

1️⃣ 순수 함수의 특징

• 외부 상태를 변경하지 않고 자신의 연산에만 집중
• 같은 입력에 대해 항상 같은 출력 반환

2️⃣ 수학적 개념과 예시

• y = 2x에서 x = 3이면 항상 y = 6
• 외부 요인(시간, 시장 상황 등)에 따라 값이 변하지 않음

function double(number) {
  return 2 * number;
}

1️⃣ 순수 함수 예시

• double(3)은 항상 6을 반환 → 외부 상태에 영향 없음

2️⃣ React와 순수 함수

• React는 컴포넌트를 순수 함수로 가정
• 같은 입력이 주어지면 항상 같은 JSX 반환

https://codesandbox.io/embed/cwqy6s?view=editor+%2B+preview&module=%2Fsrc%2FApp.js&expanddevtools=1

1️⃣ React 컴포넌트의 예측 가능성

• drinkers={2} → 항상 2 cups of water 반환
• drinkers={4} → 항상 4 cups of water 반환