[React] React 시작하기(5) - 조건부 렌더링

조건부 렌더링이란?

쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다.

이를 위해 JS 연산자  if  나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다.

 

이렇게 두가지의 컴포넌트가 있다고 가정했을 때

function HelloApple(){
  return <span>Hello, Apple!</span>
}

function HelloBanana(){
  return <span>Hello, Banana!</span>
}

 

현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다.

fucntion Fruit (props){
  const currentFruit = props.fruitName;
  
  if(currentFruit === 'Apple')
  	return <HelloApple />
  else 
  	return <HelloBanana />
}

 

엘리먼트 변수 사용하기

변수를 사용해 출력의 다른 부분은 변하지 않은 상태로 컴포넌트의 일부를 조건부로 렌더링 할 수 있다.

 

변수를 사용하는 쉬운 예시를 보자!

import {useState} from 'react';

function Display(){
  let [name, setName] = useState('Apple');

  let current = '';  // 리엑트 엘리먼트를 할당 받을 변수

  // 조건에 따라 엘리먼트 할당
  if(name === 'Apple')
    current = <HiApple />
  else 
    current = <HiSomeone />

  return (
    <div>
      <span>인사하세요!</span>
      {current}  // 조건부로 화면에 표시되는 부분
    </div>
  )
}

function HiApple() {
  return <div>사과님 안녕하세요</div>;
}

function HiSomeone() {
  return <div>익명님 안녕하세요</div>;
}

 

삼항 연산자 사용하기

JSX 문법에서는 자바스크립트 표현식을  { }  안에 포함할 수 있다.

삼항 연산자는 값으로 평가되는 표현식이기 때문에 JSX 문법에 사용할 수 있다!

 

삼항 연산자는

'조건' ? '값이 참인 경우 반환하는 값' : '값이 거짓인 경우 반환하는 값'

로 표현할 수 있다.

import {useState} from 'react';

function Display(){
  let [name, setName] = useState("Apple");

  let current = "";

  return (
    <div>
      <span>인사하세요!</span>
      // 삼항 연산자를 사용하는 경우
      {name === "Apple" ? (current = <HiApple />) : (current = <HiSomeone />)}
    </div>
  );
}

function HiApple() {
  return <div>사과님 안녕하세요</div>;
}

function HiSomeone() {
  return <div>익명님 안녕하세요</div>;
}

 

&& 연산자 사용하는 방법

&& 연산자는 왼쪽에서 평가된 값이 '참' 인 경우 오른쪽의 값으로 평가되고, '거짓' 인 경우 렌더링되지 않는다.

 

즉, && 뒤의 엘리먼트는 조건이 true 일 때만 출력되고,

조건이 false 라면 뒤의 엘리먼트를 무시하고 건너뛴다!

하지만 false 표현식이 반환되기 때문에 주의가 필요하다.

import {useState} from 'react';

function Display(){
  let [modal, setModal] = useState(false);

  return (
    <div>
      <span>모달을 열까요?</span>
      <button
        onClick={() => {
          setModal(!modal);	// 클릭할 때 마다 모달 on/off
        }}
      >
        클릭
      </button>

      {modal === true && <Modal />}  // 조건부 렌더링 -> 논리 && 연산자로 If 를 인라인으로 표현
    </div>
  )
}

function Modal() {
  return <div>이것은 모달입니다.</div>;
}

 

컴포넌트 렌더링 막기

다른 컴포넌트에 의해 컴포넌트가 렌더링 될 때 컴포넌트를 자체를 숨기고자 할 때가 있다!

이럴땐 렌더링 결과가 아니라  null  을 반환하면 된다.

 

rendering 시 null 을 반환하는 것은 생명주기 메소드 호출에 영향을 주지 않기 때문이다.

 

+) 조건부 스타일링

조건에 따라 스타일이 변경되어야 할 때 두가지 방법을 사용한다.

 

1. 동적 인라인 스타일 설정

2. 동적 css 클래스 설정

 

동적 인라인 스타일 설정

JSX 를 사용한 HTML 엘리먼트는 style을 사용해 인라인 스타일링을 할 수 있다.

이때 style은 객체를 값으로 가진다. 그리고 객체의 프로퍼티로 css의 프로퍼티를 작성 할 수 있다.

 

JSX 에서 style prop 의 프로퍼티로 작성할 때는

카멜 케이스(camel-case) 를 사용하거나
따옴표를 포함한 문자열,
대괄호 표기법 으로 계산된 프로퍼티를 사용해 작성한다

 

👀 간단 예시

function ButtonStyle() {
  let list = [];

  return (
    <div>
      {/* 카멜 케이스(camel-case) */}
      <button style={{ backgroundColor: "red" }}>RED</button>
      
      {/* 따옴표를 포함한 문자열 */}
      <button style={{ "background-color": "yellow" }}>YELLOW</button>
      
      {/* 대괄호 표기법 (현재 list 의 길이는 0 이므로 배경색은 파랑) */}
      <button style={{ backgroundColor: list.length === 0 ? "blue" : "black" }}>
        BLUE / BLACK
      </button>
    </div>
  );
}

 

동적 CSS 클래스 설정

className의 값으로 동적 스타일링하는 방식이다.

function ButtonStyle2(){
  const style = {
    padding: "10px 20px",
    backgroundColor: "orange",
  };

  return (
    <div>
      <button style={style}>버튼</button>
    </div>
  )
}