처음 만난 리액트 - 10. Conditional Rendering

Conditional Rendering 이란?

: 조건부 렌더링(조건에 따른 렌더링). 어떠한 조건에 따라서 렌더링이 달라지는 것을 의미함.

(*condition: 조건. 프로그래밍에서 사용하는 조건문 같은 것)

조건부 렌더링의 예) 조건문의 값이 true이면 버튼을 보여주고 false이면 버튼을 가리는 것.

 

function UserGreeting(props) {
	return <h1>다시 오셨군요!</h1>;
}

function GuestGreeting(props) {
	return <h1>회원가입을 해주세요.</h1>;
}

 

위의 두 함수 컴포넌트를 조건부 렌더링을 사용하여 회원인지 아닌지에 따라 선택적으로 보여주는 코드는 다음과 같다.

function Greeting(props) {
	const isLoggedIn = props.isLoggedIn;
    
    if (isLoggedIn) {
    	return <UserGreeting />;
    }
    return <GuestGreeting />;
}

이처럼 조건에 따라 렌더링의 결과가 달라지도록 하는 것을 조건부 렌더링이라고 부른다.

 

truthy & falsy

보통의 프로그래밍 언어에서는 참과 거짓을 구분하기 위해서 불리언 형태의 자료형인 true와 false 를 사용한다.

자바스크립트에서는 true는 아니지만 true로 여겨지는 값이 존재하는데 이것을 truthy라고 하고,

false는 아니지만 false로 여겨지는 값을 falsy라고 부른다.

 

다음은 자바스크립트의 대표적인 truthy와 falsy 값이다.

//truthy
true
{} (empty object)
[] (empty array)
42 (number, not zero)
"0", "fasle" (string, not empty)

//falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

모두 외워야 할 필요는 없지만 실제로 조건문에서 사용할 때 결과가 true가 될지 false가 될지를 예상하면서 개발해야 하기 때문에 헷갈리지 않도록 주의해야 한다.

Element Variables

조건부 렌더링을 사용하다 보면 렌더링 해야 될 컴포넌트를 변수처럼 다루고 싶을 때가 있다.

이때 사용하는 방법이 바로 element variables, 엘리멘트 변수이다.

 

엘리멘트 변수란?

이름 그대로 리액트의 엘리먼트를 변수처럼 다루는 방법

function LoginButton(props) {
	return (
    	<button onClick={props.onClick}>
        	로그인
        </button>
    };
}

function LogoutButton(props) {
	return (
    	<button onClick={props.onClick}>
        	로그아웃
        </button>
    );
}

위의 두 함수는 각각 로그인 버튼과 로그아웃 버튼 컴포넌트이다.

function LoginControl(props) {
	const [isLoggedIn, setIsLoggedIn] = useState(false);
    
    const handleLoginClick = () => {
    	setIsLoggedIn(true);
    }
    
    const handleLogoutClick = () => {
    	setIsLoggedIn(false);
    }
    
    let button;
    if (isLoggedIn) {
    	button = <LogoutButton onClick={handleLogoutClick} />;
    } else {
    	button = <LoginButton onClick={handleLoginClick} />;
    }
    
    return (
    	<div>
        	<Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    )
}

이 코드는 로그인 컨트롤 컴포넌트이다.

 isLoggedIn의 값에 따라서 버튼이라는 변수의 컴포넌트를 대입하며, 

이렇게 컴포넌트가 대입된 변수를 return에 넣어 실제로 컴포넌트가 렌더링이 되도록 하고 있다.

 

위와 같이 별도로 변수를 선언해서 조건부 렌더링을 할 수도 있고,

밑에 나오는 인라인 조건문을 사용하여 조금 더 간결한 코드를 작성할 수도 있다.

 

Inline

인라인InLine: 코드를 별도로 분리된 곳에 작성하지 않고 해당 코드가 필요한 곳 안에 직접 집어넣는 것

인라인 컨디션스: 조건문을 코드 안에 집어넣는 것

Inline If

if문을 필요한 곳에 직접 집어 넣어 사용하는 방법

다만 실제로 if문을 넣는 것은 아니고, if문과 동일한 효과를 내기 위해 &&라는 논리 연산자를 사용한다.

 

&& 논리 연산자를 사용할때는 첫번째 조건문이 true 이면 두번째 조건문을 평가하고

첫번째 조건문이 false이면 어차피 전체 결과는 false 가 되므로 두번째 조건문은 평가하지 않는다 (= 단축평가, Short Circuit Evaluation)

그래서 리액트에서는 조건문이 true 이면 오른쪽에 나오는 엘리먼트가 결과값이 되고 false 이면 false가 결과값이 된다.

 

inlineif는 이 && 연산자를 jsx 코드 안에서 중괄호를 사용하여 직접 집어넣는 방법이다.

 

 

Inline If-Else

if-else문을 필요한 곳에 직접 넣어서 사용하는 방법

보여주거나 안 보여주는 두 가지 경우만 있는 inline if와 달리 조건문의 값에 따라서 다른 엘리먼트를 보여줄 때 사용

삼항 연산자라고 부르는 ? 연산자를 사용

inline if-else 의 예시

 

아래 코드처럼 문자열이 아닌 엘리먼트를 넣어서 사용할수도 있다.

 

 

Componenet 렌더링 막기

지금까지 여러가지 연산자를 사용해서 조건부 렌더링을 하는 방법에 대해서 배웠다.

그렇다면 컴포넌트를 렌더링하고 싶지 않을 때는 어떻게 해야 할까?

바로 null을 리턴하면 렌더링이 되지 않는다.

 

 

위 코드는 props.warning의 값이 true인 경우에만 경고 메시지를 출력하고 false인 경우에는 아무것도 출력하지 않는 컴포넌트이다.

(참고로 class 컴포넌트의 렌더 함수에서 null을 리턴하는 것은 컴포넌트의 생명주기 함수에 전혀 영향을 미치지 않는다.)