작성자: 조광형
날짜: 2024년 11월 26일
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 개념은 컴포넌트 렌더링의 조건을 설정할 때 중요한 역할을 합니다. 이러한 값을 어떻게 활용하는지는 애플리케이션의 동작 방식에 큰 영향을 미칠 수 있습니다. 본 강좌를 통해 기본적인 이해를 마친 후, 이를 실제 애플리케이션에서 적용해 보시기를 바랍니다.