[공식문서] JavaScript에서 React로 #8

상태(State)와 함께 상호작용 추가하기 (Adding Interactivity with State)

 

React가 어떻게 상태(State)와 이벤트 핸들러를 사용하며 상호작용을 추가하는지 살펴봅시다.

 

예를 들어, HomePage 컴포넌트 내부에 'Like' 버튼을 만들어 보겠습니다. 먼저 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>
  );
}

 

상태와 Hooks (State and Hooks)

 

React에는 상태를 추가하는 useState()와 같은 함수들이 있는데, 이들을 훅(Hook)이라고 합니다. 훅을 사용하여 컴포넌트에  상태와 같은 추가적인 로직을 추가할 수 있습니다. 상태(State)란 사용자 상호작용에 의해 변경되는 UI 내의 모든 정보를 의미하며, 일반적으로 사용자 상호작용에 의해 트리거됩니다.

 

Next.js 공식문서 - States and Hooks

 

상태를 사용하여 사용자가 'Like' 버튼을 클릭한 횟수를 저장하고 증가시킬 수 있습니다. 실제로 이것이 React에서 상태를 관리하는 데 사용되는 훅의 이름인 useState() 입니다.

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

useState()는 배열을 반환하며, 배열 안의 값을 컴포넌트 내에서 배열 분해(array destructuring) 하여 사용할 수 있습니다.

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

  // ...
}

 

배열의 첫 번째 항목은 상태 값으로, 아무 이름으로 지정할 수 있습니다. 보통 설명적인 이름을 사용하는 것이 좋습니다.

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

  // ...
}

 

배열의 두 번째 항목은 값을 업데이트하는 함수입니다. 업데이트 함수의 이름을 아무렇게나 저장할 수 있지만, 업데이트할 상태 변수의 이름 뒤에 'set' 을 접두사로 사용하는 것이 일반적입니다.

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

  // ...
}

 

초기값을 추가할 수도 있습니다. 예를 들어 0으로 초기화해 보겠습니다.

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

 

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

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

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

 

마지막으로, 상태 업데이트 함수인 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 함수가 호출되어 setLikes 상태 업데이트 함수를 호출하며 현재 좋아요 횟수에 1을 더합니다.

 

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

 

상태 관리 (Managing State)

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