React - Conditional Rendering

📌 목차

• Introduction
• Conditional Rendering
• Condtional Props
• Conclusion

📌 Introduction

안녕하세요 오늘은 react에서의 conditional rendering에 대해서 알아보겠습니다. conditional rendering은 vue에서의 v-if 같은 녀석이라고 생각하시면 편할거 같아요.

📌 Conditional Rendering

일단 먼저 Hello에게 props로 isSpecial을 넘겨주겠습니다.

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} />
      <Hello color="blue" isSpecial={false} />
    </Wrapper>
  );
}

export default App;

이제 Hello component를 볼게요. 총 두가지 방법 이있어요.

첫번째 : 삼항 연산자

import React from "react";

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      <b>{isSpecial ? "speical" : "unspecial"}</b>
      Hi, {name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름 없음",
};

export default Hello;

삼항연산자는 보통 데이터가 바뀔때 사용하면 좋아요.
하지만 단순히 보여주고 안보여주는 부분은 &&연산자를 사용하면 좀더 깔끔하게 처리를 할 수 있습니다.

두번째 : && 연산자

import React from "react";

function Hello({ name, color, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      Hi, {name}
    </div>
  );
}

Hello.defaultProps = {
  name: "이름 없음",
};

export default Hello;

위의 코드를 삼항 연산자를 사용하게 된다면

{isSpecial ? <b>*</b> : null}

이렇게 사용해야 했을텐데... 좀더 깔끔하죠?

참고로 삼항 연산자에서 null, false, undefined는 랜더링을 하지 않습니다. 하지만 0⭐️은 랜더링 된다는 사실을 잊지마세요.

📌 Conditional Props(줄인 버전)

원래 대로라면 이렇게 내려주겠지만...

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true} />
    </Wrapper>
  );
}

export default App;

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial />
    </Wrapper>
  );
}

export default App;

isSpecial로 줄여서 쓸수도 있어요. 똑같이 true값이 내려가게 됩니다.

📌 Conclusion

오늘은 조건부 랜더링에 대해서 알아보았습니다. 개인적으로 vue의 v-if가 편할거 같지만 react에서는 react 방식으로 해줘야하겠죠? 사실 근데 javascript가 편한 사람이라면 react의 코드가 좀더 읽기는 쉬울수도 있을거 같아요. 그럼 다음 포스팅에서 만나요~~!