8. 컴포넌트 조건에 따라 다르게 만들기

지난 시간에는 컴포넌트를 리스트로 만들고 렌더링했습니다. 만약 이름이 없다면 "이름이 입력되지 않았다"고 알려주는 컴포넌트를 렌더링 하고 싶다면 어떻게 해야 할까요?

React에서는 조건에 따라서 렌더링을 할 수 있습니다. 동작은 JS에서의 조건처리와 같이 동작합니다. if문을 이용해서 간단하게 사용해 볼 수 있습니다.

아래 분기에서 NoName이 나오게 해보세요.


import './App.css';

function App() {
    return (
        <Hello name="licat"/>
    );
}

function Hello(props) {
    const name = props.name;
    if (name) {//이름이 있는 경우에 리스트 생성 및 렌더링
        return(
            <div>
                <h1>{props.name}</h1>
            </div>
        );
    }
    return <NoName/>;
}

function NoName(props) {
    return (
        <div>
            <h1>컴포넌트에 이름이 설정되지 않았습니다!</h1>
        </div>
    );
}

export default App;

App.js


import './App.css';

function App() {
  return (
    <Hello/>
  );
}

function Hello(props) {
	const name = props.name;
  if(name){
    return <One name={name}/>
  } else {
    return <Two/>
  }
}

function One(props){
  return (
    <div>
      <h1>{props.name}</h1>
    </div>
  )
}

function Two(props){
  return (
    <div>
      <h1>name이 입력된 것이 없습니다.</h1>
    </div>
  )
}

export default App;

조건에 따라 컴포넌트 렌더링하기

props를 이용하여 아래와같은 형식으로 스타일도 조건에 맞게 설정할 수 있습니다!

클릭할 때마다 빨간색으로 표시

클릭할 때마다 다른 페이지로 이동


import React, { useState } from "react";
import Detail from "./stylePractice/detail";
import Question from "./stylePractice/question";
import Review from "./stylePractice/review";

const ContentsContainer = ({ listName }) => {
  if (listName === "detail") {
    return <Detail />;
  } else if (listName === "qa") {
    return <Question />;
  } else if (listName === "review") {
    return <Review />;
  }
};

function NavBar() {
  const [listName, setListName] = useState("detail");
  const checkId = (e) => {
    setListName(e.target.id);
  };

  return (
    <>
      <nav>
        <ul>
          <li
            id="detail"
            style={
              listName === "detail" ? { color: "red" } : { color: "black" }
            }
            onClick={checkId}
          >
            상세정보
          </li>
          <li
            id="qa"
            onClick={checkId}
            style={listName === "qa" ? { color: "red" } : { color: "black" }}
          >
            Q&A
          </li>
          <li
            id="review"
            onClick={checkId}
            style={
              listName === "review" ? { color: "red" } : { color: "black" }
            }
          >
            Review
          </li>
        </ul>
      </nav>
      <ContentsContainer listName={listName} />
    </>
  );
}

export default NavBar;

App.js

최종코드

src.zip

2.3KB

연습문제

메뉴 - about, product, contact

메뉴를 눌렀을 때 해당 글이 보여지도록

눌린 글자는 파란색으로 바꿔주세요.

최종코드

src.zip

2.8KB