03-conditionalRendering.md

3-조건부 렌더링

🙏 조건부 렌더링이란?

특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다

3-1 조건부 렌더링

 조건부 렌더링을 사용하여 원하는 문구를 보여줄 수 있습니다.

👀 코드로 알아보기

---

 파일 구조는 아래와 같습니다.

📂 src>App.js

---

 테스트를 위하여 App.js에서 Hello 컴포넌트로 name, isLoggedIn이라는 props를 넘겨줍니다.

import "./App.css";
import Hello from "./components/Hello";

function App() {
  return <Hello name="Juno" isLoggedIn={true} />;
}

export default App;

📂 src>components>Hello.jsx

---

 간단하게 props를 destructuring 하여 name을 사용한다면 아래와 같이 사용이 가능합니다.

import React from "react";

const Hello = ({ name, isLoggedIn }) => {
  return <div>안녕하세요 {name}</div>;
};

export default Hello;

 하지만 여기서 조건을 추가해보도록 하겠습니다.

 먼저 {isLoggedIn=true}일 경우 즉, 로그인이 되었을 경우 앞에 "로그인 완료" 라는 문구를 추가적으로 보여주고
false의 경우엔 null이 되어 아무런 문구도 추가적으로 띄우지 않겠습니다.

• 참고로 JSX문법에서는 null, false, undefined를 렌더링 하게되면 아무것도 나타나지 않습니다.

import React from "react";

const Hello = ({ name, isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? "로그인완료" : null}안녕하세요{name}
    </div>
  );
};

export default Hello;

💡 여기서 {isLoggedIn ? "로그인완료" : null}는 삼항 조건 연산자로써

if ~ else 조건문의 경우

if (조건) {
  조건이 true일 경우 결과
} else {
  조건이 false일 경우 결과
}

이렇게 사용되나 삼항연산자는

{
  isLoggedIn ? "로그인완료" : null;
}
// {조건 ? 조건이 true일 경우 결과 : 조건이 false일 경우 결과}

위와같이 사용하며 리액트에서는 조건부 렌더링을 할 경우 간단하게 삼항연산자를 사용합니다.

  현재는 {isLoggedIn=true}이기 때문에 문구가 추가된것을 확인할 수 있습니다.

  하지만 위와같이 내용이 달라지는게 아니라 보여주거나, 안보여주거나 하는 상황에서는 && 연산자를 사용하는것이 더 간편합니다.

import React from "react";

const Hello = ({ name, isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && "로그인완료"}안녕하세요{name}
    </div>
  );
};

export default Hello;

  추가적으로 name에 대해 조건을 추가하고

import React from "react";

const Hello = ({ name, isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && "로그인완료"}안녕하세요{isLoggedIn ? name : "guest"}
    </div>
  );
};

export default Hello;

  {isLoggedIn=false}로 변경 후 값을 확인하면

  위와같이 {isLoggedIn=false}이기 때문에 앞의 문구는 추가되지않고 name대신 "guest"라는 문구가 뜨게됩니다.

3-2 조건부 렌더링(ver 컴포넌트)

 삼항 연산자를 이용하여 컴포넌트 또한 조건부 렌더링이 가능합니다.

 위의 예시를 두가지의 컴포넌트로 분리하여 보겠습니다.

👀 코드로 알아보기

---

 파일 구조는 아래와 같습니다.

📂 src>components>Hello.jsx

---

 로그인이 되었을 경우 UserGreeting 컴포넌트를 보여주고 비로그인일 경우 GuestGreeting 컴포넌트를 보여줍니다.

• 추가적으로 name이라는 props를 UserGreeting 컴포넌트에 전달합니다.

import React from "react";
import GuestGreeting from "./GuestGreeting";
import UserGreeting from "./UserGreeting";

const Hello = ({ name, isLoggedIn }) => {
  return (
    <div>{isLoggedIn ? <UserGreeting name={name} /> : <GuestGreeting />}</div>
  );
};

export default Hello;

📂 src>components>UserGreeting.jsx

---

 로그인일 경우 컴포넌트

import React from "react";

const UserGreeting = ({ name }) => {
  return <div>로그인완료 안녕하세요 {name}</div>;
};

export default UserGreeting;

📂 src>components>GuestGreeting.jsx

---

 비로그인일 경우 컴포넌트

import React from "react";

const GuestGreeting = () => {
  return <div>안녕하세요 guset</div>;
};

export default GuestGreeting;

🎉 결과

---

 로그인이 되었을경우

 비로그인일 경우

✨ 추가적으로 props의 값 설정을 생략하면 true가 됩니다.

---

import "./App.css";
import Hello from "./components/Hello";

function App() {
  return <Hello name="Juno" isLoggedIn />;
  // return <Hello name="Juno" isLoggedIn={true} />;
}

export default App;

👋