20. State(상태) 관리 & Hooks(훅) 사용법

• 프로젝트 링크

• State(상태) 관리 & Hooks(훅) 사용법

  • use 로 시작하는 모든 함수는 리액트 Hook 이다.
  • 초기 값이 'Components'인 상태에서 'JSX' 버튼을 클릭하면, console.log(selectedTopic)에 'Components'가 출력되는 것을 확인할 수 있다.
  • 이는 리액트가 상태를 업데이트 시키는 함수를 호출할 때, 상태 업데이트의 스케줄을 조정하며 컴포넌트 함수(아래에선 App)를 재실행한다.
  • 그래서 App 컴포넌트 함수를 다시 실행하고 나서야 selectedTopic 변수가 'JSX'로 업데이트 되는 것이다.
  • 리액트 훅은 if 문 안에서는 사용할 수 없다.
  • 리액트 훅은 컴포넌트 함수 밖에서 호출할 수 없다.
  • 리액트 훅은 중첩 함수 내에서 호출할 수 없다.
  src/App.tsx

  import { useState } from "react";
  import TabButton from "./TabButton";
  
  function App() {
    const [selectedTopic, setSelectedTopic] = useState("Please click a button");
  
    function handleSelect(selectedButton) {
      setSelectedTopic(selectedButton);
      console.log(selectedTopic);
    }
  
    return (
      <section id="examples">
        <h2>Examples</h2>
        <menu>
          <TabButton onSelect={() => handleSelect('components')}>Components</TabButton>
          <TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
          <TabButton onSelect={() => handleSelect('props')}>Props</TabButton>
          <TabButton onSelect={() => handleSelect('state')}>State</TabButton>
        </menu>
        {selectedTopic}
      </section>
    );
  }
  

  src/components/TabButton.tsx

  function TabButton({children, onSelect}) {
    return (
      <li>
        <button type="button" onClick={onSelect}>{children}</button>
      </li>
    );
  }
  
  export default TabButton;