[React] 조건적 컨텐츠 렌더링

🤔 들어가며

JSX를 반환하는 것은 주로 React 컴포넌트 내에서 사용되지만, 조건에 따라 다른 곳에서도 사용될 수 있다. return을 사용하기 전, JSX 코드는 반환되지 않기 떄문에 컴포넌트 코드 아무 곳에서 일반적으로 사용 가능하다. 즉 변수나 상수에 저장해서 쓸 수 있다는 것을 알게되었다. 하지만 궁금한점이 생겼다. useState 코드를 보면 undefinede로 falsy한 값이 기본적으로 저장해놓았다. JSX코드로 반환되기 직전에 쓴 if구문이 실행이 되는걸 보고 왜 이게 탭을 누르면 실행이 되는거지..? 라는 생각을 갖게 되었다.

💻 코드

답은 생각보다 간단했다. 초기에 if구문이 falsy한 값이 되면서 'please select a topic 이 보이게 된다. 그러나 탭을 클릭할 때 setSelectedTopic을 통해 selectedTopic이해당 탭에 해당하는 값으로 업데이트가 되면서 if구문이 true값으로 변경되면서 선택된 Topic에 해당하는 내용이 화면에 렌더링 되는 것이다.

또한 onHandleClick 함수는 Tab버튼이 클릭되었을 때 호출되며 이 함수 내에서 setSelectedTopic을 사용하여 selectedTopic의 값을 업데이트 한다. 이 업데이트가 발생되면 리액트는 컴포넌트를 다시 렌더링하고, selectedTopic 값이 변경되었기 때문에 if문이 참이 되어 새로운 Topic에 해당하는 내용이 그려지는 것이다. 함수가 클릭 이벤트에 의해 호출되어 selectedTopic을 업데이트 하는 중요한 역할을 한다.

function App() {
  const [selectedTopic, setSelectedTopic] = useState();
  const onHandleClick = (selectedButton) => {
    // selectedButton => components, jsx, props,state
    setSelectedTopic(selectedButton);
    console.log(selectedButton);
  };

  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 (
    <>
      <Header />
      <main>
        <section id="examples">
          <h2>Examples</h2>
          <menu>
            <TabButton onSelect={() => onHandleClick('components')}>Components</TabButton>
            <TabButton onSelect={() => onHandleClick('jsx')}>JSX</TabButton>
            <TabButton onSelect={() => onHandleClick('props')}>Props</TabButton>
            <TabButton onSelect={() => onHandleClick('state')}>State</TabButton>
          </menu>
          {tabContent}
        </section>
      </main>
    </>
  );
}