Nullish Coalescing 연산자는 간단한 예시로 설명해보겠습니다.

const name = getUsername() ?? 'Anonymous';
console.log(name);

위 예제에서 getUsername() 함수가 null 또는 undefined를 반환한다면, ‘Anonymous’가 출력됩니다. 그렇지 않다면, getUsername() 함수의 반환값이 출력됩니다.

Nullish Coalescing 연산자는 변수 할당이나 함수 매개변수 기본값으로 유용하게 사용될 수 있습니다. 예를 들어, 다음과 같은 상황에서 유용하게 사용할 수 있습니다.

// 변수 할당
const apiKey = process.env.API_KEY ?? 'defaultKey';

// 함수 매개변수 기본값
function greet(name) {
  name = name ?? 'Guest';
  console.log(`Welcome, ${name}!`);
}

Nullish Coalescing 연산자는 자바스크립트에서 값이 없을 때 유용한 방법으로 사용될 수 있습니다. 따라서 코드를 간결하고 가독성 있게 작성할 수 있습니다.

컴포넌트 통신 방법

React 애플리케이션에서 컴포넌트 간에 데이터를 전달하기 위해 다양한 방법을 사용할 수 있습니다. 여기서는 주로 두 가지 방법, prop 전달과 context를 소개하겠습니다.

1. Prop 전달
   • React 컴포넌트는 props라는 객체를 통해 데이터를 전달받을 수 있습니다. 부모 컴포넌트는 자식 컴포넌트에게 원하는 데이터를 props로 전달합니다.
   • 예시 코드: ```javascript // 부모 컴포넌트 function ParentComponent() { const data = ‘Hello, World!’; return <ChildComponent data={data} />; }

   // 자식 컴포넌트 function ChildComponent(props) { return <p>{props.data}</p>; } ```

   • ParentComponent에서 data를 ChildComponent에게 props로 전달하여 출력하고 있습니다.
2. Context 사용
   • Context는 React 컴포넌트 트리를 통해 전역적으로 데이터를 공유할 수 있는 메커니즘입니다. Context.Provider로 데이터를 제공하고, Context.Consumer로 데이터를 사용할 수 있습니다.
   • 예시 코드: ```javascript // Context 생성 const MyContext = React.createContext();

   // 데이터 제공자 컴포넌트 function DataProvider() { const data = ‘Hello, World!’;

   return ( <MyContext.Provider value={data}> </MyContext.Provider> ); }

   // 데이터 소비자 컴포넌트 function ChildComponent() { return ( {data => <p>{data}</p>} ); } ```

   • DataProvider에서 MyContext.Provider로 data를 제공하고, ChildComponent에서 MyContext.Consumer를 통해 data를 사용하고 있습니다.

React에서는 이 외에도 여러 가지 컴포넌트 통신 방법을 지원하고 있으며, 상황에 맞게 선택하여 사용할 수 있습니다.

#hashtags: #JavaScript #React