[React] 리액트 조건부 렌더링

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

조건부 렌더링

조건부 렌더링은 자바스크립트에서 동작하는 것처럼 if나 조건 연산자와 같은 자바스크립트 연산자를 사용하여 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다.

먼저 App.jsx에서 isSpecial이라는 props를 설정하여 isSpecial의 값이 true냐 false냐에 따라서
Hello 컴포넌트에서 props.name을 표시할지 말지 설정해보겠습니다.

App.jsx

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

function App() {
  return (
    <Wrapper>
      <Hello name="name 표시O(1)" isSpecial={true}></Hello>
      <Hello name="name 표시X" isSpecial={false}></Hello>
      <Hello name="name 표시O(2)" isSpecial={true}></Hello>
    </Wrapper>
  );
}

export default App;

components/Hello.jsx

import React from "react";

function Hello(props) {
  return <div>Hello {props.isSpecial ? props.name : null}</div>;
}

export default Hello;

components/Wrapper.jsx

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

 

function Hello(props) {
  return <div>Hello {props.isSpecial ? props.name : null}</div>;
}

Hello 컴포넌트에서는 App 컴포넌트에서 받은 props를 통해 삼항 연산자로 props.name을 표시할지 null을 표시할지 판단하였습니다.

 

조건부 렌더링을 할 때 삼항연산자를 사용해도 되지만 특정 조건이 boolean처럼 true 혹은 false라면 && 연산자를 사용하여 처리하는 것이 더욱 간단합니다.

components/Hello.jsx

import React from "react";

function Hello(props) {
  return <div>Hello {props.isSpecial && props.name}</div>;
}

export default Hello;

 

return <div>Hello {props.isSpecial && props.name}</div>;

isSpecial = true일 때
props.isSpecial && props.name => props.name

isSpecial = false일 때
props.isSpecial && props.name => false

@ 단축 평가 논리 계산법

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello

 

props 값 설정을 생략하면 ={true}

컴포넌트에 props값을 설정하게 될 때 props의 이름만 적고 값을 생략한다면 이를 true로 설정한 것으로 간주합니다.

App.jsx

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

function App() {
  return (
    <Wrapper>
      <Hello name="name 표시O(1)" isSpecial></Hello>
      <Hello name="name 표시X" isSpecial={false}></Hello>
      <Hello name="name 표시O(2)" isSpecial></Hello>
    </Wrapper>
  );
}

export default App;

컴포넌트에 isSpecial만 넣어주는 것은 isSpecial={true}와 동일합니다.

 

 

조건부 렌더링으로 텍스트 접기/펴기 구현하기

App.jsx

import React, { useState } from "react";
import Wrapper from "./components/Wrapper";
import MessageBox from "./components/MessageBox";

function App() {
  const [folding, setFolding] = useState(true);
  const foldMessage = () => {
    setFolding((show) => !show);
  };
  
  return (
    <>
      <Wrapper>
        <MessageBox folding={folding}></MessageBox>
      </Wrapper>
      <button onClick={foldMessage}>{folding ? "접기" : "펴기"}</button>
    </>
  );
}

export default App;

components/MessageBox.jsx

import React from "react";

function MessageBox(props) {
  if (!props.folding) return null;
  return (
    <>
      <div>message1</div>
      <div>message2</div>
      <div>message3</div>
      <div>...</div>
      <div>message10</div>
    </>
  );
}

export default MessageBox;

components/Wrapper.jsx

import React from "react";

function Wrapper({ children }) {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}>{children}</div>;
}

export default Wrapper;

 

const [folding, setFolding] = useState(true);

App.jsx에서 folding이라는 state를 설정하고 기본값으로 true를 줍니다.

 

const foldMessage = () => {
    setFolding((show) => !show);
  };
  
  return (
    <>
      <Wrapper>
        <MessageBox folding={folding}></MessageBox>
      </Wrapper>
      <button onClick={foldMessage}>{folding ? "접기" : "펴기"}</button>
    </>
  );

button 클릭 시 foldMessage라는 함수가 실행되고
foldMessage함수는 setFolding을 통해 folding값을 true에서 fasle로 혹은 false에서 true로 변경시켜 줍니다.

 

function MessageBox(props) {
  if (!props.folding) return null;
  return (
    <>
      <div>message1</div>
      <div>message2</div>
      <div>message3</div>
      <div>...</div>
      <div>message10</div>
    </>
  );
}

MessageBox 컴포넌트는 전달받은 props.folding 값을 통해 메시지들을 렌더링 할지 혹은 null을 반환할지 결정하게 됩니다.

 

 

📚 참고

https://reactjs-kr.firebaseapp.com/docs/conditional-rendering.html

https://react.vlpt.us/basic/06-conditional-rendering.html