[React] 조건부 렌더링 사용해보기

안녕하세요.

이번에는 React의 조건부 렌더링 사용하는 방법에 대하여 알아보겠습니다.

 

React는 상황에 따라서 원하는 내용을 출력할 수 있습니다.

이때 삼항 연산자, useState 등을 많이 사용합니다.

 

실습환경

CRA - create-react-app

 

 

아래와 같이 파일을 작성합니다.

 

/components/Item.jsx

import React from 'react'

export default function Item() {
  return (
    <h1>보이나요?</h1>
  )
}

 

/components/ConditionalRender.jsx

import React from 'react'
import { useState } from 'react'
import Item from './Item';

export default function ConditionalRender() {
    const [condition, setCondition] = useState('보여주기');

    const onChange = () => {
        condition === '보여주기' ? setCondition('감추기') : setCondition('보여주기');
    }

  return (
    <div>
        {condition === '감추기' && <Item />}
        <button onClick={onChange}>{condition}</button>
    </div>
  )
}

 

App.js

import './App.css';
import ConditionalRender from './components/ConditionalRender';

function App() {
  return (
    <div className="App">
      <ConditionalRender />
    </div>
  );
}

export default App;

 

실행결과

• 먼저 condition 값이 '감추기' 일 때 <Item /> 컴포넌트가 출력됩니다.
• condition은 버튼을 클릭할 때마다 useState에 의해서 값이 변경됩니다.

 

 

 

JSX 문으로 사용해보기

• 아래와 같이 return 위에서 변수로 설정한 후에 return에서는 변수만 입력해서 사용하는 방법도 있습니다.

 

/components/ConditionalRender.jsx

import React from 'react'
import { useState } from 'react'
import Item from './Item';

export default function ConditionalRender() {
    const [condition, setCondition] = useState('보여주기');

    const onChange = () => {
        condition === '보여주기' ? setCondition('감추기') : setCondition('보여주기');
    }

    // JSX 문법으로 사용해보기
    const conditionRender = condition === '감추기' && <Item />;
  return (
    <div>
        {/* JSX 문법으로 사용해보기 */}
        {conditionRender}
        <button onClick={onChange}>{condition}</button>
    </div>
  )
}

 

 

실습코드

결과물

 

 

 

코드

App.js

import './App.css';
import Ex3Conditional from './components/Ex3Conditional';
function App() {
  return (
    <div className="App">
      <Ex3Conditional />
    </div>
  );
}

export default App;

 

/components/Ex3Conditional.jsx

import React from 'react'
import { useState } from 'react'
import Ex3PracticeOne from './Ex3PracticeOne';
import Ex3PracticeTwo from './Ex3PracticeTwo';

export default function Ex3Conditional() {
    const [numBtn, setNumBtn] = useState('1번');

    const changeNum = () => {
        numBtn === '1번' ? setNumBtn('2번') : setNumBtn('1번');
    }

    const numBtnRender = numBtn === '1번' ? <Ex3PracticeOne title={'1번 컴포넌트'} /> : <Ex3PracticeTwo title={'2번 컴포넌트'} />;

    // 선생님 풀이
    const [condition, setCondition] = useState('1번');
    const onChange = () => {
        condition === '1번' ? setCondition('2번') : setCondition('1번');
    }
  return (
    <div>
        {numBtnRender}
        <button onClick={changeNum}>{numBtn}</button>

        {/* 선생님 풀이 */}
        {condition === '1번' ? <Ex3PracticeOne title={condition} /> : <Ex3PracticeTwo title={condition} />}
        <button onClick={onChange}>{condition}</button>
    </div>
  )
}

 

/components/Ex3PracticeOne.jsx

import React from 'react'

export default function Ex3PracticeOne({title}) {
  return (
    <>
        <h1>{title}</h1>
    </>
  )
}

 

/components/Ex3PracticeTwo.jsx

import React from 'react'

export default function Ex3PracticeTwo({title}) {
  return (
    <>
        <h1>{title}</h1>
    </>
  )
}

 

이상으로 조건부 렌더링에 대하여 알아보았습니다.

감사합니다.