[Next.js Learn] From JavaScript to React(8) - Adding Interactivity with State

지치지 않는 백엔드 개발자 김성주·2023년 6월 1일

목록 보기

10/50

상태를 사용하여 상호작용성 추가하기(Adding Interactivity with State)

React가 상태와 이벤트 핸들러를 통해 상호작용성을 추가하는 방법을 알아보겠습니다.

예를 들어, HomePage 컴포넌트 내에 좋아요 버튼을 만들어보겠습니다. 먼저, return() 문 안에 button 요소를 추가해주세요.

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button>Like</button>
    </div>
  );
}

이벤트 감지하기(Listening to Events)

버튼을 클릭했을 때 동작하도록 하려면 onClick 이벤트를 활용할 수 있습니다.

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

React에서 이벤트 이름은 카멜케이스(camelCased)로 작성됩니다. onClick 이벤트는 사용자 상호작용에 응답하기 위해 사용할 수 있는 다양한 이벤트 중 하나입니다. 예를 들어, 입력 필드의 경우 onChange 이벤트를 사용하거나, 폼의 경우 onSubmit 이벤트를 사용할 수 있습니다.

이벤트 처리하기(Handling Events)

이벤트가 트리거될 때마다 처리할 함수를 정의할 수 있습니다. return 문 앞에 handleClick()이라는 함수를 생성하세요.

function HomePage() {
  // ...

  function handleClick() {
    console.log("increment like count")
  }

  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
     )
   }

그런 다음, onClick 이벤트가 트리거되었을 때 handleClick 함수를 호출할 수 있습니다.

function HomePage() {
  //    ...
  function handleClick() {
    console.log('increment like count');
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

상태와 훅(State and Hooks)

React에는 상태(State)를 포함한 추가적인 로직을 컴포넌트에 추가할 수 있게 해주는 일련의 함수인 훅(Hooks)이 있습니다. 상태는 일반적으로 사용자 상호작용에 의해 트리거되며 시간이 지남에 따라 변경되는 UI의 정보를 의미합니다.

사용자가 좋아요 버튼을 클릭한 횟수를 저장하고 증가시키기 위해 상태(State)를 사용할 수 있습니다. 실제로, 이를 관리하는 React 훅은 useState()라고 불립니다.

function HomePage() {
  React.useState();
}

useState()는 배열을 반환하며, 배열 구조분해할당(array destructuring)를 사용하여 해당 배열의 값을 컴포넌트 내에서 액세스하고 사용할 수 있습니다.

function HomePage() {
  const [] = React.useState();

  // ...
}

배열의 첫 번째 항목은 상태 값(state value)이며, 이를 원하는대로 명명할 수 있습니다. 설명적인(descriptive) 이름으로 지정하는 것이 좋습니다.

function HomePage() {
  const [likes] = React.useState();

  // ...
}

배열의 두 번째 항목은 값을 업데이트(update)하는 함수입니다. 업데이트 함수의 이름은 원하는 대로 지정할 수 있지만, 일반적으로 set 접두사와 업데이트하는 상태 변수의 이름을 사용하는 것이 일반적입니다.

function HomePage() {
  const [likes, setLikes] = React.useState();

  // ...
}

동시에 likes 상태의 초기 값인 0을 추가할 수도 있습니다.

function HomePage() {
  const [likes, setLikes] = React.useState(0);
}

그런 다음, 컴포넌트 내에서 상태 변수를 사용하여 초기 상태가 작동하는지 확인할 수 있습니다.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);

  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

마지막으로, HomePage 컴포넌트 내에서 상태 업데이터 함수인 setLikes를 호출할 수 있습니다. 이를 위해 이전에 정의한 handleClick() 함수 내에 추가해보세요.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

이제 버튼을 클릭하면 handleClick 함수가 호출되고, handleClick 함수가 현재 좋아요 수 + 1의 인자를 가지고 setLikes 상태 업데이터 함수를 호출합니다.

참고: props는 첫 번째 함수 매개변수로 컴포넌트에 전달되는 반면, 상태(State)는 컴포넌트 내에서 초기화되고 저장됩니다. 상태 정보를 자식 컴포넌트에 props로 전달할 수는 있지만, 상태를 업데이트하는 로직은 상태가 최초로 생성된 컴포넌트 내에서 유지되어야 합니다.

상태 관리하기(Managing State)

이것은 상태(State)에 대한 간단한 소개에 불과하며, React 애플리케이션에서 상태와 데이터 흐름을 관리하는 방법에 대해 더 알아볼 수 있습니다. 더 자세한 내용을 알고 싶다면, React 문서의 "Adding Interactivity"와 "Managing State" 섹션을 참조하는 것을 추천합니다.