[React] 명령형 코드가 아닌 선언형 코드로 작성하기

React는 선언형 코드를 지향한다.

React는 선언형 프로그래밍 패러다임에 기반을 두고 있으며, UI를 선언적인 방식으로 정의한다. React 컴포넌트는 상태와 프로퍼티를 입력값으로 받아들이고, 이를 기반으로 UI를 렌더링한다. 상태나 프로퍼티 값이 변경될 때마다 React는 자동으로 UI를 다시 렌더링하여 새로운 값으로 업데이트한다.

다음 잘못된 코드의 예시를 보며, 이해해보자.

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const button = document.querySelector('#increment');
    button.addEventListener('click', increment);

    return () => {
      button.removeEventListener('click', increment);
    };
  });

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <span>{count}</span>
      <button id="increment">Increment</button>
    </div>
  );
}

위의 코드를 보면, useEffect를 사용하여 DOM 이벤트 핸들러를 등록 및 해제한다. increment 함수에서는 상태를 직접 조작하며, UI를 업데이트하고 있다.

이 코드는 명령적인 방식으로 UI를 정의하므로, 코드가 복잡하고 유지보수가 어려울 수 있습니다. 또한 DOM API를 직접 조작하므로, React의 성능 최적화와 관련된 이점을 놓치게 된다.

 

아래 코드를 보자.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count => count + 1);
  }

  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

이 코드에서는 useState를 사용하여 count 상태와 setCount 함수를 정의하고 있다.

increment 함수에서는 setCount 함수를 호출하여 상태를 업데이트하고 있다. 그리고 onClick 이벤트 핸들러를 이용하여 버튼 클릭 시 increment 함수가 실행되도록 한다.

이 코드는 UI를 직접 조작하지 않으며, count 상태와 increment 함수를 이용하여 UI를 업데이트한다. 또한, setCount 함수의 콜백 함수를 이용하여 상태를 업데이트하므로, 상태를 변경하는 동안 이전 상태에 의존하지 않고, 항상 최신 상태를 참조한다.

 

이렇게 함으로써, React의 성능 최적화와 관련된 이점을 놓치지 않고, 코드의 가독성과 유지보수성을 높일 수 있다.