[React] 조건부 렌더링

🐣 이번 시간에는 조건부 렌더링에 대해서 알아보겠다.

 

🐣 조건부 렌더링이란?

조건부 렌더링:  특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 말한다.

조건부 렌더링을 사용하는 가장 쉬운 방법은 삼항 연산자를 사용하는 것이다.

(삼항연산자-> 조건식 ? 참 : 거짓)

 

function App() {

  return (

    <Wrapper>

      <Hello name="react" color="red" isSpecial={true}/>

      <Hello color="blue"/>

    </Wrapper>

  );

}

위와 같이 App 컴포넌트에서 Hello 컴포넌트의 props로 isSpecial을 true로 추가한다. true도 자바스크립트 값이기 때문에 중괄호 안에 적어주었다.

 

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

    return (

        <div style={{color}}>

            {isSpecial ? <span>⭐</span> : null}

            {name}님 안녕하세요.

        </div>

    ) 

}

이렇게 isSpecial의 값이 있는지 물어보고 있다면 ⭐을, 없다면 null을 반환하도록 작성하면 된다.

 

결과를 확인해보면, isSpecial의 값이 true인 Hello 컴포넌트에만 ⭐이 붙은 것을 확인할 수 있다.

 

**참고로 JSX에서 undefined,null,false를 리턴하게 되면 아무것도 나타나지 않는다. 그러나 0은 나타난다.

 

보통 삼항 연산자는 내용이 달라져야할 때 사용한다.

지금은 내용이 달라진다기 보다는 값이 참이냐 거짓이냐에 따라 숨기거나 보여주고 있다.

지금 같은 상황에서는 삼항 연산자보다는 앤드 연산자를 이용해서 처리하는게 더 간편하다.

 

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

    return (

        <div style={{color}}>

            {isSpecial && <span>⭐</span>}

            {name}님 안녕하세요.

        </div>

    ) 

}

isSpecial이 true라면 뒤에 값은 true이니까 true && true = true가 되어서 값이 출력된다.

isSpecial이 false라면 false && true = false가 되어서 값이 출력되지 않는다.

 

**참고로 리액트에서 props를 값은 지정하지 않고 props만 설정하게 되면 이는 true로 인식하게 된다.

<Hello name="react" color="red" isSpecial/>