[React] 조건부 렌더링

조건부 렌더링

 
리액트 컴포넌트가 조건식의 결과에 따라 각기 다른 값을 페이지에 렌더링하는 것을 조건부 렌더링이라고 한다. 그렇다면 조건부 렌더링은 주로 어떤 경우에 사용하는 걸까? 
 
ex) 페이스북 '좋아요' 버튼
 
이 버튼은 사용자가 이미 '좋아요'를 눌렀다면 파란색, 그렇지 않으면 회색으로 표시한다. 조건에 따라 페이지 요소의 모습이나 종류를 다르게 표시하고 싶을 때 조건부 렌더링을 사용한다.
 
🌏 [삼항 연산자를 활용한 조건부 렌더링]
 
if 조건문은 표현식에 해당하지 않기 때문에 JSX와 함께 사용할 수 없지만, 표현식인 삼항 연산자를 이용하면 조건에 따라 다른 값을 렌더링할 수 있다.
 

import React from "react";

function Body() => {
    const num = 19;
    return (
    	<>
            <h2>
            	{num}은(는) {num % 2 === 0 ? "짝수" : "홀수"}입니다.
            </h2>
        </>
    );
}  
export default Body;

 
= 삼항 연산자를 이용해 변수 num의 값이 2로 나누어 떨어지면 짝수, 그렇지 않으면 홀수를 반환한다.
 
 
🌏 [조건문을 이용한 조건부 렌더링]
 
조건문은 자바스크립트의 표현식이 아니기 때문에 JSX와 함께 사용할 수 없지만, 다음과 같은 조건에 따라 컴포넌트가 반환하는 값을 다르게 표시하도록 만들 수 있다.
 

import React from "react";

function Body() => {
    const num = 200;
    
    if (num % 2 === 0) {
    	return <div>{num}은(는) 짝수입니다</div>;
    } else {
    	return <div>{num}은(는) 홀수입니다</div>;
    }
}  
export default Body;

 

삼항 연산자를 이용하는 방법과 조건문을 이용하는 방법은 각기 장단점이 있다.

삼항 연산자는 코드가 매우 간결하지만, 자주 사용할 경우 가독성을 해칠 우려가 있다. 그리고 삼항 연산자는 다중 조건을 작성하기 힘들다.

반면 조건문은 가독성은 좋으나 기본적으로 작성해야 할 코드가 많고 중복 코드가 발생할 우려도 있다. 처한 상황에 맞게 적절히 선택해 사용하면 좋다.
 

 
📕참고: 한 입 크기로 잘라 먹는 리액트 - 이정환