23. CSS 스타일링 및 동적 스타일링

• 프로젝트 링크

• CSS 스타일링 및 동적 스타일링

  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 
            isSelected={selectedTopic === 'components'} 
            onSelect={() => handleSelect('components')}
          >
            Components
          </TabButton>
          <TabButton 
            isSelected={selectedTopic === 'jsx'} 
            onSelect={() => handleSelect('jsx')}
          >
            JSX
          </TabButton>
          <TabButton 
            isSelected={selectedTopic === 'props'} 
            onSelect={() => handleSelect('props')}
          >
            Props
          </TabButton>
          <TabButton 
            isSelected={selectedTopic === 'state'} 
            onSelect={() => handleSelect('state')}
          >
            State
          </TabButton>
        </menu>
        {!selectedTopic ? <p>Please select a topic.</p> : (
          <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, isSelected}) {
    return (
      <li>
        <button type="button" onClick={onSelect} className={isSelected ? 'active' : undefined}>{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>
    );
  }`,
    },
  };