1. 조건에 따라 다른 페이지 렌더링

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

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

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

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

function Hello({name}){
    if (name) {
        return (
            <div>
                <h1>{name}</h1>
            </div>
        )
    }
    return <NoName/>
}

function NoName(){
    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;

2. 간단한 예제 코드

아래 코드도 복사 붙여넣기 대신 직접 코드를 작성해보시길 권합니다. props를 이용하여 아래와같은 형식으로 작성할 수 있습니다.

• 클릭할 때마다 빨간색으로 표시
• 클릭할 때마다 다른 페이지로 이동

import React, { useState } from "react";
import Detail from "./Components/Detail";
import Question from "./Components/Question";
import Review from "./Components/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;

실습한 전체 소스코드입니다.

src.zip