리액트 강좌: Truthy & Falsy

1. 서론

자바스크립트는 동적 타입을 지원하는 언어로, 값이 가진 “진리값(truthiness)”과 “거짓값(falsiness)”에 따라 흐름이 크게 달라집니다. 이 강좌에서는 리액트에서 어떻게 truthy와 falsy 값을 활용하는지에 대해 알아보겠습니다. 기초적인 개념부터 고급 기술까지 다룰 예정이니, 주의 깊게 읽어보시기 바랍니다.

2. Truthy와 Falsy란?

자바스크립트에서 값은 항상 Boolean 값으로 변환될 수 있습니다. 이때, 특정 값은 ‘truthy’로 평가되고, 나머지는 ‘falsy’로 평가됩니다.

2.1 Falsy 값의 정의

자바스크립트에서 ‘falsy’로 평가되는 값은 다음과 같습니다:

• false
• 0 (숫자)
• “” (빈 문자열)
• null
• undefined
• NaN (Not-a-Number)

2.2 Truthy 값의 정의

위의 ‘falsy’ 값 이외의 모든 값은 truthy로 평가됩니다. 여기에는 다음과 같은 값들이 포함됩니다:

• true
• 1 (숫자)
• “hello” (문자열)
• { } (빈 객체)
• [ ] (빈 배열)
• 함수

3. Truthy & Falsy의 활용

리액트에서 컴포넌트의 상태를 관리하거나 조건부 렌더링을 할 때 truthy와 falsy 값을 자주 사용합니다. 따라서 이러한 개념에 대한 이해는 리액트 애플리케이션을 개발하는 데 매우 중요합니다.

3.1 조건부 렌더링

조건부 렌더링은 상태에 따라 어떤 컴포넌트를 렌더링할 것인지 결정하는 방식입니다. 아래의 코드를 살펴보세요.

{isLoggedIn ?  : }
            

위 코드에서 isLoggedIn이 truthy한 경우 LogoutButton 컴포넌트를 렌더링하고, 그렇지 않은 경우에는 LoginButton을 렌더링합니다.

3.2 논리 AND (&&) 연산자

리액트에서는 논리 AND 연산자를 사용하여 조건부 렌더링을 쉽게 할 수 있습니다. 예를 들어:

{isLoggedIn && }
            

이 코드는 isLoggedIn이 truthy한 경우에만 WelcomeMessage를 렌더링합니다.

4. Truthy & Falsy 값의 테스트

4.1 콘솔에서의 확인

자바스크립트의 콘솔에서 다양한 값이 truthy 또는 falsy인지 확인할 수 있습니다.

console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false

console.log(Boolean(true)); // true
console.log(Boolean(1)); // true
console.log(Boolean("hello")); // true
console.log(Boolean({})); // true
console.log(Boolean([])); // true
console.log(Boolean(function() {})); // true
            

위 코드를 실행해보면 각 값에 대한 진리값을 확인할 수 있습니다.

5. 고급 사용법

리액트에서 truthy와 falsy 값을 좀 더 고급적으로 사용하는 몇 가지 패턴에 대해 알아보겠습니다.

5.1 사용자 정의 훅

리액트에서 사용자 정의 훅을 활용하여 truthy와 falsy 값을 활용하는 예를 살펴보겠습니다.

import { useState } from 'react';

function useLogin() {
    const [isLoggedIn, setLoggedIn] = useState(false);
    
    const login = () => {
        setLoggedIn(true);
    };

    const logout = () => {
        setLoggedIn(false);
    };

    return { isLoggedIn, login, logout };
}
            

위의 사용자 정의 훅을 통해 로그인 상태를 관리할 수 있습니다.

5.2 컨텍스트 API

리액트의 Context API를 사용하여 전체 애플리케이션에서 login 상태를 공유할 수 있습니다. 아래와 같이 설정합니다:

import React, { createContext, useContext } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const { isLoggedIn, login, logout } = useLogin();
    return (
        
            {children}
        
    );
}

export function useAuth() {
    return useContext(AuthContext);
}
            

이제 애플리케이션의 어느 위치에서나 useAuth 훅을 통해 로그인 상태와 관련된 값을 사용할 수 있습니다.

6. 결론

리액트에서 truthy와 falsy 개념은 컴포넌트 렌더링의 조건을 설정할 때 중요한 역할을 합니다. 이러한 값을 어떻게 활용하는지는 애플리케이션의 동작 방식에 큰 영향을 미칠 수 있습니다. 본 강좌를 통해 기본적인 이해를 마친 후, 이를 실제 애플리케이션에서 적용해 보시기를 바랍니다.