21. 데이터 기반 State(상태) 가져오기 및 출력

• 프로젝트 링크

• 데이터 기반 State(상태) 가져오기 및 출력

  src/App.tsx

  import { useState } from "react";
  import TabButton from "./TabButton";
  import { EXAMPLES } from "./data";
  
  function App() {
    const [selectedTopic, setSelectedTopic] = useState("components");
  
    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>
        <div id="tab-content">
          <h3>{EXAMPLES[selectedTopic].title}</h3>
          <p>{EXAMPLES[selectedTopic].description}</p>
          <pre>
            <code>
              {EXAMPLES[selectedTopic].code}
            </code>
          </pre>
        </div>
      </section>
    );
  }
  

  src/components/TabButton.tsx

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

  src/data.ts

  import componentsImg from './assets/components.png';
  import propsImg from './assets/config.png';
  import jsxImg from './assets/jsx-ui.png';
  import stateImg from './assets/state-mgmt.png';
  
  export const CORE_CONCEPTS = [
    {
      image: componentsImg,
      title: 'Components',
      description:
              'The core UI building block - compose the user interface by combining multiple components.',
    },
    {
      image: jsxImg,
      title: 'JSX',
      description:
              'Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.',
    },
    {
      image: propsImg,
      title: 'Props',
      description:
              'Make components configurable (and therefore reusable) by passing input data to them.',
    },
    {
      image: stateImg,
      title: 'State',
      description:
              'React-managed data which, when changed, causes the component to re-render & the UI to update.',
    },
  ];
  
  export const EXAMPLES = {
    components: {
      title: 'Components',
      description:
              'Components are the building blocks of React applications. A component is a self-contained module (HTML + optional CSS + JS) that renders some output.',
      code: `
        function Welcome() {
          return <h1>Hello, World!</h1>;
        }
      `,
    },
    jsx: {
      title: 'JSX',
      description:
              'JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript (e.g., it may output dynamic content).',
      code: `
        <div>
          <h1>Welcome {userName}</h1>
          <p>Time to learn React!</p>
        </div>
      `,
    },
    props: {
      title: 'Props',
      description:
              'Components accept arbitrary inputs called props. They are like function arguments.',
      code: `
  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }`,
    },
    state: {
      title: 'State',
      description:
              'State allows React components to change their output over time in response to user actions, network responses, and anything else.',
      code: `
  function Counter() {
    const [isVisible, setIsVisible] = useState(false);
  
    function handleClick() {
      setIsVisible(true);
    }
  
    return (
      <div>
        <button onClick={handleClick}>Show Details</button>
        {isVisible && <p>Amazing details!</p>}
      </div>
    );
  }`,
    },
  };