React 다시보기 #2

그 동안 React 하면서 놓쳤던 중요한 것들을 다시보자!

각 함수들 사이에 Props 주고받기

 

button 관리 ex)

<TabButton onSelected={() => handleClicker('components')}>Components</TabButton>

 

기본적으로 Button 컴포넌트에서 children으로 가운데 "Components"를 받을 수 있고

export default function TabButton({ children, onSelected }) {
  return (
    <li>
      <button onClick={onSelected} className>
        {children}
      </button>
    </li>
  );
}

 

-> children은 기본 옵션으로 {children}으로 값을 가져올 수 있음

-> onClick 옵션으로 클릭 이벤트를 받아서 onSelected 함수 실행시켜서 보내주고

 useState로 해당 버튼 관리하기.

const [selectedTab, setSelectedTab] = useState();

  function handleClicker(e) {
    console.log(e);
    setSelectedTab(e);
  }

  let contents = 'Click the tabs to see examples!';

  if (selectedTab) {
    contents = (
      <div id='tab-content'>
        <h3>{EXAMPLES[selectedTab].title}</h3>
        <p>{EXAMPLES[selectedTab].description}</p>
        <pre>
          <code>{EXAMPLES[selectedTab].code}</code>
        </pre>
      </div>
    );
  }

 

그리고 애매하게 알았던 것.

! EXAMPLES라는 데이터에서 값을 가져올때 EXAMPLES[KEY].something 이런식으로

[] 사이에 key를 넣어서 가져오는 Object에 대한 이해

const example = { key : 'value' }; example[key] = 'value'

 

return 에서 Fragments 로 감싸기 근데 요즘에는 그냥 <> </>  이걸로 처리한다