19. UI를 업데이터하지 않는 법 - 리액트의 뒷편 살펴보기

• 프로젝트 링크

• UI를 업데이터하지 않는 법 - 리액트의 뒷편 살펴보기

  • 아래와 같이 작성하면, 탭버튼 클릭할 때 UI가 업데이트 되지 않는다.
  • 일반적인 변수로는 UI를 업데이트 할 수 없다.
  • 그러므로 컴포넌트 함수가 재실행되어야 한다는 것을 리액트에게 알려줄 방법을 찾아야 한다.
    이 때문에 매우 중요한 개념인 state(상태)가 필요한 것이다.
  src/App.tsx

  import TabButton from "./TabButton";
  
  function App() {
    let tabContent = "Please click a button";
  
    function handleSelect(selectedButton) {
      console.log(`TabButton ${selectedButton} selected!`);
      tabContent = selectedButton;
    }
  
    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>
        {tabContent}
      </section>
    );
  }
  

  src/components/TabButton.tsx

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