React의 상태 반응성

이제 반응성이 어떻게 작동하는지 살펴봅시다. 반응성은 상태가 변경될 때 변경 사항이 즉시 화면에 반영되도록 합니다.

예제를 통해 살펴보겠습니다. 제품 이름을 가진 상태가 있다고 가정해 봅시다:

jsxconst [name, setName] = useState('prod');

렌더링에 제품 이름을 출력해 봅시다:

jsxreturn <div>
  <span>{name}</span>
</div>;

이제 상태를 변경할 수 있는 버튼을 만들어 봅시다:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

클릭 핸들러에서 setName 함수를 사용하여 제품의 새 이름을 설정합니다:

jsxfunction clickHandler() {
  setName('xxxx');
}

전체 코드를 모아보겠습니다. 버튼을 클릭하면 텍스트가 새 값으로 즉시 변경됩니다:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

별도의 핸들러 함수를 사용할 필요는 없습니다. 익명 화살표 함수를 사용할 수도 있습니다:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}