[React] 조건부 렌더링(Rendering)

 

 

조건부 렌더링(rendering)이란?

특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것

 

먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다.

 

import React from 'react';
import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴
import Wrapper from './Wrapper';


function App() {
  return (
      <Wrapper>
        {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */}
      <Hello name="react" color="red" isSpecial={true}/> 
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

 

Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다.

 

해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라 * 표시를 하는 것이다.

import React from 'react'; // 리액트를 불러와서 사용하겠다.

// 함수 형태 컴포넌트 
// 함수형태 컴포넌트의 첫 자리는 대문자 권장
// props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재
                // 구조 분해
function Hello({color, name, isSpecial}) {
        // HTML 처럼 보이지만 JSx
        return (
        <div style={{
            color // color : color 뒤의 color 생략 가능
            // isSpecial 값에 따른 조건부 렌더링
        }}> {isSpecial ? <b>*</b> : null} 
             안녕하십니까 {name}
        </div>    
    );
}


Hello.defaultProps = {
    name : '이름 없음'
};

// Hello라는 컴포넌트를 내보내겠다.
export default Hello;

 

true를 선언한 상단에만 별표 표시가 출력된다.

**주의 : falsy한 값인 null, undefined등은 화면에 아무것도 표시하지 않지만 0의 경우는 표시된다.

 

&& 연산자를 활용하여 삼항연산자를 아래와 같이 변경하여 사용할 수 있다.
{isSpecial && <b>*</b>}