React에서 선언적 코드 작성하기

1. JSX와 선언적 컴포넌트

JSX는 HTML과 유사한 문법을 사용해 UI를 정의할 수 있어 UI 구조를 명확하게 보여줍니다. React 컴포넌트는 데이터를 통해 UI를 표현하는 방식으로, 데이터가 변경되면 React가 알아서 UI를 업데이트합니다.



function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

위의 Greeting 컴포넌트는 name이라는 prop을 받아 해당하는 텍스트를 렌더링합니다. UI를 "어떻게" 그릴지 세부적으로 명령하지 않고, 필요한 데이터를 제공하여 UI가 "무엇을" 보여줄지 표현하는 선언적 코드입니다.

2. 상태 관리와 `useState` 훅

React의 useState 훅을 사용하면 상태 변화에 따라 컴포넌트가 다시 렌더링됩니다. 상태 변화 자체를 추적하거나 DOM을 직접 수정할 필요 없이, React가 이를 처리해 줍니다.



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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

Counter 컴포넌트는 count 상태를 기반으로 UI를 업데이트합니다. 버튼을 클릭할 때마다 상태가 증가하고, React는 이에 따라 컴포넌트를 다시 렌더링하여 변경 사항을 반영합니다.

3. 조건부 렌더링

조건부 렌더링을 통해 UI의 특정 부분을 렌더링할지 결정하는 선언적 방식을 사용할 수 있습니다. if나 삼항 연산자를 사용해 조건을 설정하여 필요할 때만 UI를 표현합니다.



function UserStatus({ isLoggedIn }) {
  return isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
}

위 코드에서 isLoggedIn이 true이면 환영 메시지를, 그렇지 않으면 로그인 요청 메시지를 보여줍니다.

4. 리스트 렌더링

map() 메서드를 사용해 배열을 반복하면서 각 항목을 렌더링하는 것도 선언적입니다. 각 항목에 대해 개별적으로 DOM 요소를 생성하는 것이 아니라, 데이터 구조에 따라 UI가 동적으로 구성되도록 합니다.



function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.name}</li>
      ))}
    </ul>
  );
}

리스트는 tasks 배열을 기반으로 하여 선언적으로 렌더링되므로, tasks가 변경되면 UI도 자동으로 업데이트됩니다.

5. 컴포넌트의 컴포지션(Composition)

React는 선언적 컴포지션 방식을 통해 작은 컴포넌트를 조합하여 복잡한 UI를 구성할 수 있습니다. 이렇게 하면 각 컴포넌트는 독립적으로 선언적 UI를 렌더링하게 됩니다.



function App() {
  return (
    <div>
      <Greeting name="John" />
      <Counter />
      <UserStatus isLoggedIn={true} />
    </div>
  );
}

요약

React에서 선언적 코드로 작성하면 다음과 같은 장점이 있습니다.

코드 가독성: UI가 무엇을 보여줄지 명확하게 나타내므로 코드가 직관적입니다.

유지보수성: 각 컴포넌트가 독립적으로 작동하고 상태 변화에 따라 자동으로 업데이트되므로 유지보수가 쉽습니다.

효율성: React가 DOM을 직접 조작하지 않고 가상 DOM을 통해 변화하는 부분만 효율적으로 업데이트하므로 성능이 향상됩니다.