Github

조건부 렌더링

1. 개요

조건부 렌더링은 값의 결과가 true인지 false인지 또는 특정한 값인지 따라 다른 결과물을 렌더링 하는 것을 의미한다.

2. if문을 통한 조건부 렌더링

아래와 같은 App.js컴포넌트, Hello.js컴포넌트가 있다.

// App.js
import { useState } from "react";
import Hello from "./Hello";

function App() {
  const [isLogin, setIsLogin] = useState(false);

  const onClickBtn = () => setIsLogin((prev) => !prev);

  return (
    <div>
      <Hello isUser={isLogin} />
      <button onClick={onClickBtn}>상태 바꾸기</button>
      <span>isLogin값: {isLogin ? "true" : "false"}</span>
    </div>
  );
}

export default App;

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

const Hello = ({ isLogin }) => {
  if (isLogin) {
    return <div>반가워요🖐</div>;
  } else {
    return <div>로그인이 필요해요😿</div>;
  }
};

export default Hello;

isLogin의 값에 따라 Hello.js컴포넌트에서 if문 통해 다른 JSX를 반환하고 있다.

아래는 isLogin의 값에 따라 달라지는 렌더링의 결과 사진인다.

3. 삼항 연산자를 통한 조건부 렌더링

3-1. 삼항 연산자란?

먼저 삼항 연산자에 대해 살펴보자.

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참이라면 실행할 식이 물음표 뒤로 들어간다. 그리고 바로 뒤로 콜론(:)이 들어가며 조건이 거짓이라면 실행할 식이 마지막에 들어간다. 보통 if 명령문의 단축 형태로 쓰인다.

기본구문: condition ? exprIfTrue : exprIfFalse

  • condition: 조건문으로 들어갈 표현식

  • exprIfTrue: 참일 때 실행할 식

  • exprIfFalse: 거짓일 때 실행할 식

만약 조건문이 참일 경우만 나타내기 위해서는 어떻게 해야 할까? 해당 경우는 아래와 같이 작성한다.

condition && exprIfTrue

연속된 조건문은 아래와 같이 작성한다.

condition1 ? value1 : condition2 ? value2 : value3;

3-2. 조건부 렌더링

이제 위의 Hello.js컴포넌트를 삼항연산자를 사용하여 코드를 수정해보자.

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

const Hello = ({ isLogin }) => {
  return <div>{isLogin ? "반가워요🖐" : "로그인이 필요해요😿"}</div>;
};

export default Hello;

렌더링 결과는 위와 같다.

4. Conclusion

컴포넌트를 렌더링을 할 때 조건에 따라 값을 달리 하는 경우가 생각보다 많다. 나는 대부분 삼항 연산자를 사용을 하지만 긴 JSX를 묶어야 하는 경우가 있을 땐 if문을 사용하는 편이다. 예를 들어 아래와 같은 경우다.

if (loading) {
   return <Loading />;
}
if (!loading) {
  return (
  <div>Hello!!</div>
  <div>Hello!!</div>
  <div>Hello!!</div>
  <div>Hello!!</div>
  // 긴 코드가 이어짐
  )
}

loading은 DB의 데이터를 불러오고 있는 중인지, 불러왔는지를 알려주는 값이고 이에 따라 <Loading />컴포넌트를 렌더링 할지 아니면 아래의 JSX를 렌더링 할지를 결정하는 역할을 한다. 물론 위의 코드도 삼항 연산자로 충분히 바꾸어 사용할 수 있다. 하지만 개인적으로는 코드가 길어지면 위와 같은 코드가 가독성이 좋아보인다:)

참고

6. 조건부 렌더링 삼항 조건 연산자

📅 2022-08-07

Previous배열 렌더링NextLifecycle

Last updated