React 상태 관리: useState Hook 으로 카운터 만들기

소개

React 에서 "state"는 컴포넌트 내에서 시간에 따라 변경될 수 있는 데이터를 의미합니다. 컴포넌트의 state 가 변경되면 React 는 새로운 state 를 반영하기 위해 자동으로 컴포넌트를 다시 렌더링합니다. Hooks 는 함수형 컴포넌트에서 React 의 state 및 생명주기 (lifecycle) 기능에 "연결 (hook into)"할 수 있게 해주는 함수입니다.

이 실습에서는 가장 기본적인 Hook 중 하나인 useState를 사용하여 React 함수형 컴포넌트에서 state 를 관리하는 방법을 배우게 됩니다. 사용자 상호작용에 반응하여 state 를 초기화하고, 표시하고, 업데이트하는 방법을 보여주기 위해 간단한 카운터 애플리케이션을 구축할 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 85%입니다.학습자들로부터 97%의 긍정적인 리뷰율을 받았습니다.

컴포넌트 파일에서 react 로부터 useState 가져오기

먼저 개발 환경을 준비해 보겠습니다. 설정 스크립트가 Vite 를 사용하여 ~/project/my-app에 새로운 React 프로젝트를 이미 생성했습니다.

첫 번째 작업은 필요한 종속성을 설치하고 개발 서버를 시작하는 것입니다. WebIDE 에서 터미널을 열고 다음 명령을 하나씩 실행하십시오.

프로젝트 디렉토리로 이동합니다:

cd my-app

프로젝트 종속성을 설치합니다:

npm install

개발 서버를 시작합니다:

npm run dev -- --host 0.0.0.0 --port 8080

마지막 명령을 실행한 후 서버가 실행 중임을 나타내는 출력이 표시됩니다. 이제 LabEx 인터페이스의 "Web 8080" 탭을 클릭하여 라이브 애플리케이션을 볼 수 있습니다. 이 실습 전반에 걸쳐 ~/project/my-app/src/App.jsx 파일을 수정할 것입니다.

이 단계에서는 먼저 React 라이브러리에서 useState Hook 을 가져오는 것으로 시작하겠습니다. Hook 은 특별한 함수이며, 사용하려면 먼저 react 패키지에서 가져와야 합니다.

WebIDE 의 파일 탐색기를 사용하여 ~/project/my-app/src/App.jsx 파일을 찾아 엽니다.

먼저 기본 콘텐츠를 정리하여 최소한의 시작점을 만들겠습니다. App.jsx의 전체 내용을 다음 코드로 바꾸십시오:

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

이제 파일 맨 위에 import 문을 추가하여 useState Hook 을 컴포넌트 내에서 사용할 수 있도록 합니다.

import { useState } from "react";

function App() {
  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

이 줄은 JavaScript 에 'react' 라이브러리에서 명명된 export 인 useState 함수를 사용하고 싶다는 것을 알려줍니다.

const [count, setCount] = useState(0) 로 상태 초기화하기

이 단계에서는 useState Hook 을 호출하여 컴포넌트에 새로운 state 를 생성할 것입니다.

useState 함수는 하나의 인수를 받습니다: state 의 초기값입니다. 이 함수는 두 개의 요소를 포함하는 배열을 반환합니다:

state 의 현재 값입니다.
state 를 업데이트할 수 있게 해주는 함수입니다.

이 두 값을 별도의 변수로 가져오기 위해 "배열 구조 분해 할당 (array destructuring)"이라는 구문을 사용합니다. 이 변수들의 이름은 [something, setSomething]과 같이 짓는 것이 관례입니다.

App 컴포넌트 함수 내에서 return 문 앞에 다음 줄을 추가하여 state 를 초기화합니다. state 변수의 이름은 count로 하고 초기값은 0으로 설정하겠습니다.

~/project/my-app/src/App.jsx 파일을 다음 코드로 업데이트하십시오:

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
    </>
  );
}

export default App;

이제 우리 컴포넌트에는 count라는 이름의 state 가 있으며, 이 state 는 0으로 초기화되고, 나중에 값을 변경하는 데 사용할 수 있는 setCount 함수가 있습니다.

JSX 에서 {count}로 상태 값 표시하기

이 단계에서는 사용자 인터페이스에 count state 변수의 현재 값을 표시할 것입니다.

JSX 에서는 중괄호 {}로 감싸서 마크업 안에 유효한 JavaScript 표현식을 직접 포함시킬 수 있습니다. 이를 통해 state 변수와 같은 동적 데이터를 렌더링할 수 있습니다.

현재 count 값을 포함하는 메시지를 표시하기 위해 <p> 태그를 추가해 보겠습니다.

~/project/my-app/src/App.jsx의 return 문 안의 JSX 를 수정하십시오:

import { useState } from "react";

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

파일을 저장한 후 "Web 8080" 탭으로 전환하십시오. 페이지에 "The current count is: 0"이라는 텍스트가 표시되는 것을 볼 수 있으며, 이는 초기 state 값이 올바르게 렌더링되고 있음을 확인시켜 줍니다.

setCount(count + 1) 로 상태 업데이트하기

이 단계에서는 state 를 업데이트하는 로직을 정의할 것입니다. state 를 직접 수정해서는 안 된다는 점을 기억하는 것이 중요합니다 (예: count = count + 1). 대신, useState에서 제공하는 state 설정 함수, 즉 이 경우 setCount를 항상 사용해야 합니다.

설정 함수를 호출하면 React 는 state 가 변경되었음을 알게 됩니다. 그러면 React 는 새로운 state 값으로 컴포넌트를 다시 렌더링하도록 예약합니다.

App 컴포넌트 내부에 count 를 증가시키는 로직을 처리할 간단한 함수를 만들어 보겠습니다. 이 함수를 incrementCount라고 부르겠습니다.

~/project/my-app/src/App.jsx 파일에 incrementCount 함수를 추가하십시오:

import { useState } from "react";

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

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
    </>
  );
}

export default App;

이 함수는 호출될 때 현재 count 값을 가져와 1 을 더한 다음, 새로운 값을 setCount에 전달합니다. 이렇게 하면 App 컴포넌트가 다시 렌더링됩니다.

버튼 클릭 이벤트로 업데이트 트리거하기

마지막 단계에서는 state 업데이트 로직을 사용자 액션에 연결할 것입니다. 컴포넌트에 버튼을 추가하고, 사용자가 버튼을 클릭하면 이전 단계에서 생성한 incrementCount 함수를 호출할 것입니다.

React 에서는 onClick과 같은 특별한 속성에 함수를 제공하여 클릭과 같은 이벤트를 처리할 수 있습니다.

JSX 에 <button> 요소를 추가하고 onClick 핸들러를 incrementCount 함수로 설정해 보겠습니다.

~/project/my-app/src/App.jsx를 최종 코드로 업데이트하십시오:

import { useState } from "react";

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

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

  return (
    <>
      <h1>React Counter</h1>
      <p>The current count is: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
}

export default App;

onClick에 함수 자체 (incrementCount) 를 전달하고, 함수 호출 결과 (incrementCount()) 를 전달하지 않는다는 점에 유의하십시오. React 는 버튼이 클릭될 때마다 이 함수를 호출할 것입니다.

이제 "Web 8080" 탭으로 이동하십시오. "Increment" 버튼이 보일 것입니다. 버튼을 클릭하고 화면의 count 가 클릭할 때마다 증가하는 것을 지켜보십시오!