리액트에서 많이 쓰는 조건부 랜더링 4가지

Luffy.A·2022년 5월 3일

React 리액트

리액트 개념을 공부해보자

목록 보기

2/2

조건부 랜더링 언제쓰지?

조건부로 랜더링 하는 경우는 정말 많다.

를 들어,
로그아웃 상태면 로그인 버튼을 보여주고
로그인 상태면 로그아웃 버튼을 보여줘야 한다.

즉 조건에 따라서 랜더링이 달라야 하는데,
리액트에서 조건부 랜더링에 자주 사용 되는 방법 있다.

🤔 근데, 그냥 if쓰면 되는거 아니야?

맞다.그런데 아니다. 이게 무슨 소리야 ㅋㅋㅋ

리액트에서는 JSX를 사용하는데,
JSX에서 자바스크립트를 사용하려면 중괄호를 열어줘야 한다. { }
그런데, 이 중괄호 안에서는 if문을 사용할 수 없다!!!

그래서, if문 대신 자주 사용하는 조건부 렌더링 방법을 알아야 한다는 말씀!

그러면 어떤 방법들이 있을까?

자주사용되는 방식은 크게 4가지가 있다.

if
&&
삼항연산자
아예 안그리고 싶은 경우

이렇게 4가지를 살펴보자!

if

이미 잘 알고 있는 if. 다만, return 아래 부분에서는 사용이 안된다는 점! 하지만 여전히 유용하고 가장 기본적이다.

if ( 조건) {
	return A
} else {
	return B	
}

&&

&& 연산자는 이런 식으로 사용 가능하다.

조건 && A

쉽게 말해 조건이 true면 A를 그린다.
그런데 &&만의 문제가 있는데, 바로 falsy를 주의 해야 한다.

falsy는 false는 아닌데 false 같은 녀석들이다.
falsy한 친구들은 MDN에서 자세히 살펴보자.
https://developer.mozilla.org/ko/docs/Glossary/Falsy

대략적으로, 0이나 null " " 이런 녀석들이다.

삼항연산자

JS만 할 때는 잘 사용하지 않았는데,
리액트에서는 정말 없으면 안 될 녀석!!

조건 ? A : B

이런식으로 사용한다. 조건이 참이면 A, 거짓이면 B를 반환한다.

if문과 비교하면 이렇다.

    // if 문
    if (props.isLogin) {
        return <UserGreeting name="Ahn" count={0} />
    } else {
    	return <GuestGreeting />
    }

      
    // 3항 연산자
    return (props.isLogin 
        ? <UserGreeting name="Ahn" count={0} />
        : <GuestGreeting />)

삼항연산자가 확실히 갈끔한다.
더군다나 return 안에서도 사용이 가능하니 더욱 편리하다!

아예 안그리고 싶을 경우

조건이 맞지 않으면 아예 빈 값을 넣고 싶다면?
null 을 반환하면 된다. 이건 참 쉽지!

예시 코드

const UserGreeting = (props) => {
    return <h1>{props.name && props.name + ","} Welcome It's {props.count} times</h1>
}

const GuestGreeting = (props) => {
    return <h1>Please sign up</h1>
}


const Greeting = (props) => {
    // if 문
    // if (props.isLogin) {
    //     return <UserGreeting name="Ahn" count={0} />
    // }
    // return <GuestGreeting />

    // 3항 연산자
    return (props.isLogin 
        ? <UserGreeting name="Ahn" count={0} />
        : <GuestGreeting />)
}

const ConditionalRendering = () => {
    const isLogin = true
    return (
        <div>
            <Greeting isLogin={isLogin} />
        </div>
    );
};

export default ConditionalRendering;