React- 조건부 렌더링

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

조건부 렌더링

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

 

App.js (파일명)

// App.js
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
   return (
     <Wrapper>
       <Hello name="react" color="blue" isSpecial={true}/> {/* true가 자바스크립트 값이라서 { }를 써 주어야함 */}
       <Hello color="pink"/>
     </Wrapper>
    );
}

export default App;

App,js에서 Hello.js에게 조건을 전달 하기 위해 isSpecial이라는 Props를 만들어주었다.

 

 

Hello.js (파일명)

 

import React from 'react'; 

function Hello({color, name, isSpecial}) {

    return (
        <div style={{
            color
        }}>
            {isSpecial ? <b>*</b> : null} {/* 삼항 연산자 사용 */}
            안녕하세요!{name}
        </div>
    );

}

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

export default Hello; 

isSpecial 이 true 이냐 false 이냐에 따라서 컴포넌트의 좌측에 * 표시를 보여주려고 하는데

이를 처리하는 기본적인 방법은 삼항 연산자를 사용하는 것이다.

isSpecial 값이 true라면 * 표를 보여주게 하고 false라면 null을 보여주게 하였다.

참고로 JSX에서 null과 undefined를 렌더링 하게 된다면 화면에 아무것도 나타나지 않게 된다.

 

실행 결과

isSpecial의 값이 true로 되어 있기에 화면에 *표시가 나타난다.

 

 

 

만약 값을 false로 바꾸면 아래와 같이 *표시가 나타나지 않는다.