Nullish Coalescing 연산자는 변수가 null 또는 undefined가 아닌 경우 변수의 값을 그대로 사용하고, null 또는 undefined인 경우에만 대체 값을 사용합니다. 이렇게 함으로써 코드의 안정성을 높일 수 있고, 의도치 않게 falsy한 값들이 대체 값을 덮어쓰는 상황을 방지할 수 있습니다.

예를 들어, 사용자의 이름을 표시하는 기능을 개발한다고 가정해봅시다.

const username = getUserFromAPI() || 'Guest';
console.log(`Welcome, ${username}!`);

위 코드에서는 getUserFromAPI() 함수에서 사용자 이름을 가져오는데, 만약 사용자 이름이 없는 경우에는 ‘Guest’라는 값을 대체로 사용합니다.

하지만 이런 경우에는 getUserFromAPI()가 빈 문자열('')을 반환하는 경우에도 대체 값으로 ‘Guest’가 사용되어 버릴 수 있습니다.

이런 상황을 피하려면 Nullish Coalescing 연산자를 사용하여 다음과 같이 작성할 수 있습니다.

const username = getUserFromAPI() ?? 'Guest';
console.log(`Welcome, ${username}!`);

위 코드에서는 getUserFromAPI() 함수가 null 또는 undefined를 반환하는 경우에만 ‘Guest’를 대체 값으로 사용합니다. 빈 문자열은 대체 값으로 사용되지 않으므로 원하는 결과를 얻을 수 있습니다.

컴포넌트 상태 관리 방법

컴포넌트 기반 아키텍처를 사용하는 웹 애플리케이션에서는 상태 관리가 매우 중요한 요소입니다. 상태 관리의 목적은 컴포넌트 간의 데이터 공유와 상태 변경을 효율적으로 관리하는 것입니다.

자바스크립트 기반의 프론트엔드 프레임워크 및 라이브러리에서는 다양한 상태 관리 방법을 제공하고 있습니다. 가장 일반적인 상태 관리 라이브러리로는 Redux, MobX, VueX 등이 있습니다. 이러한 라이브러리들은 전역 상태 관리를 제공하여 여러 컴포넌트가 데이터를 공유하고 상태를 변경할 수 있도록 도와줍니다.

또한, React에서는 내장된 useState 훅을 사용하여 컴포넌트의 상태를 관리할 수 있습니다. useState 훅은 간단하게 컴포넌트의 상태를 선언하고 변경하는 기능을 제공합니다.

import React, { useState } from 'react';

function Counter() {
  // count 상태를 선언하고 0으로 초기화
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

위 코드에서 useState 훅을 사용하여 count라는 상태를 선언하고 0으로 초기화했습니다. setCount 함수를 사용하여 count 값을 변경할 수 있습니다. 이렇게 선언된 상태는 컴포넌트 내부에서 사용되며, 컴포넌트가 다시 렌더링될 때마다 초기화되지 않습니다.

이 외에도 Redux와 같은 상태 관리 라이브러리를 사용하면 애플리케이션 전역에서 상태를 관리할 수 있으며, 복잡한 컴포넌트 간의 데이터 흐름을 효율적으로 관리할 수 있습니다.

상태 관리는 웹 애플리케이션의 규모와 요구사항에 따라 다양한 방식으로 구성할 수 있으며, 개발자의 필요에 맞게 선택하여 사용할 수 있습니다.

#JavaScript #상태관리