30. 내부 요소에 Props 가 전달되지 않을 경우

• 프로젝트 링크

• CoreConcepts.tsx

  import CoreConcept from "./CoreConcept";
  import {CORE_CONCEPTS} from "./data";
  
  function CoreConcepts() {
      return (
          <section id="core-concepts">
              <h2>Core Concepts</h2>
              <ul>
                  {CORE_CONCEPTS.map((concept) => (
                      <CoreConcept key={concept.title} {...concept} />
                  ))}
              </ul>
          </section>
      );
  }
  
  export default CoreConcepts;
  

• Examples.tsx

  import { useState } from "react";
  import TabButton from "./TabButton";
  import { EXAMPLES } from "./data";
  
  function Examples() {
      const [selectedTopic, setSelectedTopic] = useState("components");
      
      function handleSelect(selectedButton) {
          setSelectedTopic(selectedButton);
          console.log(selectedTopic);
      }
      
      let tabContent = <p>Please select a topic.</p>;
      
      if (selectedTopic) {
          tabContent = (
              <div id="tab-content">
                  <h3>{EXAMPLES[selectedTopic].title}</h3>
                  <p>{EXAMPLES[selectedTopic].description}</p>
                  <pre>
                      <code>
                          {EXAMPLES[selectedTopic].code}
                      </code>
                  </pre>
              </div>
          );
      }
      
      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>
              {tabContent}
          </section>
      )
  }
  
  export default Examples;
  

• 구조가 똑같다. section 태그, h2 타이틀, 그 아래 내용

  • 아래와 같이 Props 를 구조분해해 전달하는 것은 규모가 큰 프로젝트일 수록 특히 비효율적이다.

  • 아래와 같은 패턴 대신 forwarded props 혹은 proxy props 라는 패턴을 사용한다.

    function Section({children, title, id, className}) {
        return (
            <section id={id} className={className}>
                <h2>{title}</h2>
                {children}
            </section>
        );
    }
    
    export default Section;
    

• Examples.tsx

  import { useState } from "react";
  import TabButton from "./TabButton";
  import { EXAMPLES } from "./data";
  import Section from "./Section";
  
  function Examples() {
      const [selectedTopic, setSelectedTopic] = useState("components");
      
      function handleSelect(selectedButton) {
          setSelectedTopic(selectedButton);
          console.log(selectedTopic);
      }
      
      let tabContent = <p>Please select a topic.</p>;
      
      if (selectedTopic) {
          tabContent = (
              <div id="tab-content">
                  <h3>{EXAMPLES[selectedTopic].title}</h3>
                  <p>{EXAMPLES[selectedTopic].description}</p>
                  <pre>
                      <code>
                          {EXAMPLES[selectedTopic].code}
                      </code>
                  </pre>
              </div>
          );
      }
      
      return (
          <Section title="Examples" id="examples">
              <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>
              {tabContent}
          </Section>
      )
  }
  
  export default Examples;