[React] 컴포넌트에 여러 상태 만들기

"한 컴포넌트에서 상태를 여러 조각으로 나눌 수 있을까?"

이번 글에서는 두 가지 상태를 가진 컴포넌트를 만들어보면서 이 질문에 대한 해답을 알아보겠습니다.

실제로 유용한 예제는 아니지만, 한 컴포넌트에서 여러 상태 조각을 사용하는 방법을 보여주기 위한 예시입니다.

ToggleCounter 컴포넌트 생성

새로운 컴포넌트인 ToggleCounter.jsx를 생성하고, 기본적인 틀을 이전에 만들었던 Toggler 컴포넌트에서 복사해옵니다.

// ToggleCounter.jsx
import React, { useState } from 'react';
import './ToggleCounter.css'; // 스타일링을 위한 CSS 파일 가져오기

export default function ToggleCounter() {
  const [isHappy, setIsHappy] = useState(true);
  const [count, setCount] = useState(0);

  const toggleIsHappy = () => {
    setIsHappy(!isHappy);
  };

  const incrementCount = () => {
    setCount(count + 2);
  };

  return (
    <div className="ToggleCounter" onClick={toggleIsHappy}>
      {isHappy ? <span role="img" aria-label="happy face">😊</span> : <span role="img" aria-label="sad face">😢</span>}
      <p>Count: {count}</p>
      <button onClick={incrementCount}>+</button>
    </div>
  );
}

스타일링 추가

이제 ToggleCounter.css 파일을 생성하여 컴포넌트에 스타일을 추가합니다.

/* ToggleCounter.css */
.ToggleCounter {
  cursor: pointer;
  font-size: 2rem;
  display: inline-block;
  margin: 10px;
}

 

사용하기

만든 컴포넌트를 사용해봅시다. App.jsx에서 ToggleCounter를 렌더링합니다.

// App.jsx
import React from 'react';
import ToggleCounter from './ToggleCounter';

function App() {
  return (
    <div>
      <h1>Multiple State in a Component</h1>
      <ToggleCounter />
    </div>
  );
}

export default App;

동작 확인

리액트 앱을 실행하고 토글로 상태를 변경하고, 버튼을 눌러 카운트를 증가시켜보세요. 한 컴포넌트 안에서 서로 다른 두 상태 조각을 사용하여 독립적으로 상태를 관리하는 것을 확인할 수 있습니다. 이렇게 필요에 따라 여러 개의 상태를 가진 컴포넌트를 만들 수 있습니다.