조건부 렌더링

조건부 렌더링

if나 조건부 연산자처럼 스크립트 연산자를 사용해서 특정 조건에 따라 다른 결과물을 렌더링하는것

 

App.jsx

 

import logo from './logo.svg';
import './App.css';
import Sakura from "./Sakura";
import Wrapper from "./Wrapper";

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

 

Sakura.jsx

 

import React from "react";

function Sakura(props) {

    return <div>Sakura {props.isSpecial ? props.name : null} </div>;
}

export default Sakura;

 

Wrapper.jsx

 

import React from "react";

// *주의 children 은 사용자 지정어가 아니다.
function Wrapper({ children }) {

    const style = {
        border: "5px solid pink",
        padding: "20px",
        margin: "20px"
    };

    return <div style={style}>{children}</div>;
}

export default Wrapper;

 

 

결과

 

 

Sakura 컴포넌트 부분에 App 컴포넌트에서 받은 props를 가지고 삼항연산자를 통해 props.name 이나 null을 표시

 

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

조건의 값이 boolean 처럼 true 거나 false 면 위 처럼 && 연산자를 사용해도 된다.

 

props 값을 생략시 ture

• isSpecial = true >>> props.isSpecial && props.name => props.name
• isSpecial = false >>> props.isSpecial && props.name => false

 

---

 

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

 

App.jsx

 

import './App.css';
import Sakura from "./Sakura";
import Wrapper from "./Wrapper";
import {useState} from "react";
import MessageBox from "./MessageBox";

function App() {

    const [folding, setFolding] = useState(true);
    const foldMessage = () => {
        setFolding((show) => !show);
    };

    return (
        <>
            <Wrapper>
                <MessageBox folding={folding}></MessageBox>
            </Wrapper>
            <button style={{ margin: "20px" }} onClick={foldMessage}>{folding ? "접기" : "펴기"}</button>
        </>
    );
}
export default App;

 

여기서 아래의 코드처럼 useState() 라는 코드가 있는데

이것은 HOOK의 일종이며 아래 코드는 해당 변수의 초기 값을 true로 설정 해 둔 것이다.

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

---

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>message4</div>
            <div>message5</div>
            <div>message6</div>
            <div>message7</div>
            <div>message8</div>
            <div>message9</div>
            <div>message10</div>
        </>
    );
}
export default MessageBox;

 

Wrapper.jsx

 

import React from "react";

// *주의 children 은 사용자 지정어가 아니다.
function Wrapper({ children }) {

    const style = {
        border: "5px solid pink",
        padding: "20px",
        margin: "20px"
    };

    return <div style={style}>{children}</div>;
}

export default Wrapper;

 

결과

 

접기 전

접은 후

 

 

접기 / 펼치기의 코드를 설명하자면

 

먼저 state로 해당 변수 값을 ture로 설정해 두었고

버튼을 클릭할 시 foldMessage 라는 함수를 실행

foldMessage 함수는 setFolding 을 통해서 Folding 값을 ture -> false / false -> ture 로 변경

MessageBox 컴포넌트는 전달받은 props.folding 값을 통해서 메세지들을 렌더링 할것인지 null 처리 할것인지 결정