31. 감싸진 요소에 Props 전달하기

• 프로젝트 링크

• props를 아래와 같이 정의

  function Section({children, title, ...props}) {
      return (
          <section {...props}>
              <h2>{title}</h2>
              {children}
          </section>
      );
  }
  
  export default Section;
  

  function TabButton({children, isSelected, ...props}) {
      return (
          <button className={isSelected ? 'selected' : ''} {...props}>
              {children}
          </button>
      );
  }
  
  export default TabButton;
  

• 사용 예시

  import TabButton from "./TabButton";
  
  function Examples({selectedTopic, handleSelect}) {
      return (
          <div id="examples">
              <h2>Examples</h2>
              <menu>
                  <TabButton
                      isSelected={selectedTopic === 'components'}
                      onClick={() => handleSelect('components')}
                  >
                      Components
                  </TabButton>
                  <TabButton
                      isSelected={selectedTopic === 'jsx'}
                      onClick={() => handleSelect('jsx')}
                  >
                      JSX
                  </TabButton>
                  <TabButton
                      isSelected={selectedTopic === 'props'}
                      onClick={() => handleSelect('props')}
                  >
                      Props
                  </TabButton>
                  <TabButton
                      isSelected={selectedTopic === 'state'}
                      onClick={() => 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>
              )}
          </div>
      );
  }