Adding Interactivity with State

[원문]

React가 상태 및 이벤트 핸들러와의 상호작용성을 추가하는 데 어떻게 도움이 되는지 살펴보겠습니다.

예를 들어 HomePage 구성 요소 내에 “좋아요” 버튼을 만들어 보겠습니다. 먼저 return() 문 안에 버튼 요소를 추가합니다.

index.html
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 이벤트를 사용할 수 있습니다.

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

React에서 이벤트 이름은 camelCased입니다. onClick 이벤트는 사용자 상호 작용에 응답하는 데 사용할 수 있는 많은 이벤트 중 하나입니다. 예를 들어 입력 필드에 onChange를 사용하거나 양식에 onSubmit을 사용할 수 있습니다.

Handling events

이벤트가 트리거될 때마다 이벤트를 “처리”하는 함수를 정의할 수 있습니다. handlerClick()이라는 return 문 앞에 함수를 만듭니다.

index.html
function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
     )
}

그런 다음 onClick 이벤트가 트리거될 때 handlerClick 함수를 호출할 수 있습니다.

index.html
function HomePage() {
  //    ...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

브라우저에서 이것을 실행해 보세요. 개발자 도구에서 로그 출력이 어떻게 증가하는지 확인하세요.

State and hooks

React에는 Hooks라는 함수 세트가 있습니다. 후크를 사용하면 상태와 같은 추가 논리를 구성 요소에 추가할 수 있습니다. 상태는 시간이 지남에 따라 변경되는 UI의 모든 정보로 생각할 수 있으며 일반적으로 사용자 상호 작용에 의해 트리거됩니다.

state를 사용하여 사용자가 “좋아요” 버튼을 클릭한 횟수를 저장하고 늘릴 수 있습니다. 실제로 상태를 관리하는 데 사용되는 React 후크는 `useState()함수 입니다.

프로젝트에 useState()를 추가합니다. 배열을 반환하며, 배열 구조 분해를 사용하여 구성 요소 내부에서 해당 배열 값에 액세스하고 사용할 수 있습니다.

index.html
function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

배열의 첫 번째 항목은 상태 value이며, 이름은 무엇이든 지정할 수 있습니다. 설명이 포함된 이름을 지정하는 것이 좋습니다.

index.html
function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

배열의 두 번째 항목은 값을 update하는 함수입니다. 업데이트 함수의 이름은 무엇이든 지정할 수 있지만, 업데이트할 상태 변수의 이름 뒤에 set을 접두사로 붙이는 것이 일반적입니다.

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

좋아요 상태의 초기 값을 0으로 추가할 수도 있습니다.

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

그런 다음 구성 요소 내부의 상태 변수를 사용하여 초기 상태가 작동하는지 확인할 수 있습니다.

index.html
function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

마지막으로, HomePage 구성 요소에서 상태 업데이트 함수인 setLikes를 호출할 수 있습니다. 이를 이전에 정의한 handlerClick() 함수 내에 추가하겠습니다.

index.html
function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

이제 버튼을 클릭하면 현재 좋아요 수 + 1의 단일 인수를 사용하여 setLikes 상태 업데이트 함수를 호출하는 handlerClick 함수가 호출됩니다.

Note

참고: 첫 번째 함수 매개변수로 구성 요소에 전달되는 props와 달리 상태는 구성 요소 내에서 시작되고 저장됩니다. 상태 정보를 하위 구성 요소에 props으로 전달할 수 있지만 상태 업데이트 논리는 상태가 처음 생성된 구성 요소 내에 유지되어야 합니다.

Managing state

이는 상태에 대한 소개일 뿐이며 React 애플리케이션의 상태 및 데이터 흐름 관리에 대해 더 많은 내용을 배울 수 있습니다. 더 자세히 알아보려면 React 문서의상호작용 추가 및 상태 관리 섹션을 살펴보는 것이 좋습니다.

Additional Resources