[React] 컴포넌트 순수 함수(Pure function) / 부수 효과(Side effects)

📌 리액트 컴포넌트 순수성

• 리액트 컴포넌트는 순수해야 한다
  
  • 순수 함수와 부수 효과의 분리해야 한다. (= 계산과 액션 분리)
• 컴포넌트 내부에 Side Effects 로직이 포함되서는 안된다.
  

 

 

 

 

✅ 순수 함수 (Pure function)

: 입력이 동일할 경우, 결과도 동일한 함수

• 같은 입력이 주어졌다면, 같은 결과를 반환해야 한다.
  👉 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않는다.
  
• 일정한 결과가 필요할 때 사용(마크업 렌더링 등)
• 부수 효과 ❌
• 계산 (동일 입력 → 동일 출력)
• 결과 예측 가능 ➡ 에러를 줄인다⏬

function sumPure(x, y, z) {
  return x + y + z;
}

console.log(1, 2, 3); // 6
console.log(1, 2, 3); // 6

 

 

✨ 순수 함수인지 검사하는 법 

👉 <StrictMode> 사용

• 자동으로 2번 실행해준다.
• 배포했을 때에는 1번만 실행

 

 

 

✅ 부수 효과 (Side effects)

: 함수가 실행되는 동안 외부의 상태를 변경하거나 영향을 미치는 작업

• 액션 (실행 시점에 따라 값 변경)
• 예측할  수 없음  ➡ 에러를 높인다⏫
• 사용자와의 상호작용(외부의 상태를 변경): 웹 API, 네트워크 요청, 접근성 준수 등
  👉 리액트 렌더링과 관련 없는 코드
  👉 이벤트 핸들러, Effect 함수에서 사용

let a = 9;

function sumPure(x, y, z) {
  return x + y + z + (++a)
}
// a값이 함수 실행할 때마다 변경됨

console.log(1, 2, 3); // 16
console.log(1, 2, 3); // 17

 

 

 

 

⏩ 예측 가능한 부분(순수 함수)와 예측이 어려운 부분(사이드 이펙트)으로 분리하기

예측이 어려운 부분(사이드 이펙트 함수)

  async function fetchUsers(endpoint) {
    const response = await fetch(endpoint);
    const jsonData = await response.json();
    return jsonData;
  }

 

 

예측 가능한 부분(순수 함수)

  function getUserLength(users) {
    return users.length;
  }

 

 

사용

  async function demo() {
    const users = await fetchUsers(
      'https://jsonplaceholder.typicode.com/users'
    );
    const userCount = getUserLength(users);
    console.log({ userCount });
  }

  demo();

 

---

 

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

 

Pure Function & Side Effects | Notion