[REACT] 컴포넌트의 최적화와 확장

React 컴포넌트 순수성

React 컴포넌트는 본질적으로 JavaScript 함수입니다. 이 함수가 순수하면, 주어진 입력에 따라 동일한 JSX를 반환하며 외부 환경에 영향을 주지 않습니다.

순수 컴포넌트의 장점

서버 사이드 렌더링(SSR) 안정성

순수 컴포넌트는 동일한 입력에 대해 항상 동일한 결과를 보장하므로, 서버에서 여러 요청을 처리할 때 일관된 렌더링을 제공합니다.

성능 최적화

입력값이 변하지 않으면 React는 불필요한 재렌더링을 생략하거나 캐싱할 수 있어, 애플리케이션의 속도가 향상됩니다.

렌더링 중단 및 재개 가능성

순수 컴포넌트는 렌더링이 중단되더라도 최신 입력값으로 언제든지 안전하게 재개될 수 있어, 복잡한 UI에서도 안정성을 유지합니다.

React의 최신 기능 활용

데이터 페칭, 트랜지션, Suspense 같은 최신 기능들이 순수성을 전제로 설계되었기 때문에, 이를 온전히 활용하려면 컴포넌트가 순수해야 합니다.

순수 컴포넌트 작성의 핵심 원칙

• 독립성: 컴포넌트는 외부 변수나 객체에 의존하거나 이를 변경하지 않고, props와 state에만 의존해야 합니다.
• 일관성: 동일한 입력이 주어지면 언제나 동일한 JSX를 반환해야 합니다.
• 불변성: props와 state를 직접 수정하지 않고, 필요한 경우 새로운 값으로 업데이트해야 합니다.
• 로직 최소화: 복잡한 계산이나 부수 효과는 이벤트 핸들러나 useEffect로 분리합니다.

예제: 컴포넌트

function ToDoItem({ task, isCompleted }) {
  // 순수 함수: 동일한 task와 isCompleted에 대해 항상 같은 결과를 반환
  const renderTask = () => {
    return isCompleted ? (
      <span style={{ textDecoration: 'line-through', color: '#888' }}>
        {task} ✅
      </span>
    ) : (
      <span>{task}</span>
    );
  };

  return (
    <li style={{ padding: '8px', borderBottom: '1px solid #eee' }}>
      {renderTask()}
    </li>
  );
}

export default function ToDoList() {
  const todos = [
    { id: 1, task: '이메일 확인', isCompleted: true },
    { id: 2, task: '코드 작성', isCompleted: false },
    { id: 3, task: '회의 참석', isCompleted: true },
  ];

  return (
    <section>
      <h1>오늘의 할 일</h1>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {todos.map((todo) => (
          <ToDoItem 
            key={todo.id} 
            task={todo.task} 
            isCompleted={todo.isCompleted} 
          />
        ))}
      </ul>
    </section>
  );
}