자바스크립트에서의 Nullish Coalescing과 라우터 연동 처리 방법

29 Sep 2023

javascript

Nullish Coalescing 연산자는 자바스크립트에서 새로 도입된 연산자 중 하나로, 변수가 null 또는 undefined인 경우에 대해 기본값을 설정하는데 사용됩니다. 이전에는 논리 OR 연산자 (

)를 사용하여 변수가 falsy한 경우에만 기본값을 설정할 수 있었습니다. 하지만 논리 OR 연산자의 경우, 변수가 falsy한 값을 가지더라도 0이나 빈 문자열 같은 값이면 기본값으로 사용될 수 있습니다. Nullish Coalescing 연산자 (??)는 변수가 null 또는 undefined일 때만 기본값으로 사용됩니다.

const foo = null;
const bar = "Hello";

const result = foo ?? bar;
console.log(result); // 출력: "Hello"

const baz = 0;
const qux = "World";

const result2 = baz ?? qux;
console.log(result2); // 출력: 0

위의 코드에서 foo 변수의 값은 null이므로, Nullish Coalescing 연산자를 사용해서 bar 변수의 값을 result 변수에 대입했습니다. 동일하게 baz 변수의 값은 0이므로, result2 변수에는 baz 변수의 값이 대입됩니다.

라우터 연동 처리 방법

라우터는 웹 애플리케이션에서 다른 페이지로 이동할 때 사용되는 기능입니다. 자바스크립트 라이브러리인 React의 경우, React Router를 사용하여 라우팅을 구현할 수 있습니다.

React Router를 사용하여 라우터를 연동하는 방법은 다음과 같습니다:

React Router 설치하기: 먼저 프로젝트에 React Router를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install react-router-dom

라우터 설정하기: 애플리케이션의 라우터 설정은 일반적으로 최상위 컴포넌트에서 이루어집니다. react-router-dom에서 제공하는 BrowserRouter 컴포넌트를 사용하여 라우터를 설정합니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

페이지 컴포넌트 생성하기: 각 라우팅 경로별로 보여줄 컴포넌트를 생성합니다. 위의 코드에서는 Home 컴포넌트와 About 컴포넌트를 사용하였습니다.

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      {/* 홈 페이지 내용 */}
    </div>
  );
};

export default Home;

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>About</h1>
      {/* 어바웃 페이지 내용 */}
    </div>
  );
};

export default About;

React Router를 사용하여 라우터를 연동하는 방법은 위에서 설명한 것과 같습니다. 각 페이지 컴포넌트에서 필요한 내용을 구현하고, 라우팅 경로에 맞게 페이지 컴포넌트가 표시됩니다.

#hashtags: #JavaScript #ReactRouter