[React] 조건부 렌더링

[React] 조건부 렌더링

 

📌 조건부 렌더링

리액트에서는 원하는 동작을 `캡슐화`하는 컴포넌트를 만들 수 있다.

이렇게 하면 상태에 따라 몇 개의 컴포넌트만 화면에 효율적으로 렌더링할 수 있다.

조건부 렌더링은 특정 조건에 따라 다른 결과물을 렌더링하는 것이다.

리액트에서는 조건, 상태에 맞는 컴포넌트를 반환을 위해 if문이나 조건부 연산자를 사용한다.

 

✅ if문 사용해서 조건부 렌더링하기

조건에 따라 보여지는 컴포넌트또는 내용이 다를 경우 조건부 렌더링하면 된다.

function Sleep(){
    return console.log('Go to sleep');
}

function Study(){
    return console.log('Study...')
}

두 함수 중에서 상태에 따라 하나의 컴포넌트만 보여주는 컴포넌트를 만들 것이다.

function Todo(){
    let isSleep = props.isSleep;
    if(isSleep){
        return <Sleep />
    } else {
        return <Study />
    }
}

function Home(){
    return(
        <Todo isSleep={true}/>
    )
}

Home 컴포넌트의 isSleep 의 값이 true 인 경우 Sleep 컴포넌트가 보이게 된다. 

Home 컴포넌트의 true 를 false 로 바꾸면 Sleep 컴포넌트 대신 Study 컴포넌트가 보인다..

 

✅ 삼항 연산자를 사용해 조건부 렌더링하기

function Eat({title, sub, isGood}){
    return(
        <div>
            {isGood ? 'Good' : 'more please'} {sub}
        </div>
    )
}

function Home(){
    return(
        <Eat title="milk" sub="chocolate" isGood={true} />
    )
}

isGood 이 true 라면 'Good' 이 false 라면 'more please' 가 보인다.

 

✅ && 연산자 사용 

삼항연산자 뿐만 아니라 && 연산자를 이용해 조건부 렌더링할 수 있다.

// 단축 평가 논리 계산법
// Sleep : true 인 경우
{Sleep && Study} // Study

// Sleep : false 인 경우
{Sleep && Study} // Sleep

 

03. 단축 평가 논리 계산법 · GitBook

 

✅ || 연산자

|| 는 첫번째 true 값을 가져오고, 두 조건이 모두 false 이면 오른쪽 값을 가져온다.

왼쪽 조건을 undefined로 했을 때, 오른쪽 값을 가져온다.

import React from 'react';
import './style.css';

const App = () => {
  let value = undefined;
  let hello = "hello React?";
  return (
    <div>
      { value || hello }
    </div>
  );
};

export default App;

value가 undefined 일 경우에만 오른쪽을 렌더링!

 

📌 토글 버튼 구현하기

import React, { useState } from 'react';

function Control() {
  const [myState, setMyState] = useState(true);
  const [myWord, setMyWord] = useState('버튼을 클릭하세요');
  function handleClick() {
    if (!myState) {
      setMyState(true);
      setMyWord('잘래요');
    } else {
      setMyState(false);
      setMyWord('싫어요');
    }
  }
  return (
    <div>
      {myWord}
      <button onClick={handleClick}>
        {myState ? 'Sleeping~' : 'Study....'}
      </button>
    </div>
  );
}

export default Control;

 

 

 

Toggle Button - useState - StackBlitz

 

 

 

 

---

참고 : 리액트 공식 문서, 벨로퍼트와 함께하는 모던 리액트
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.