React 프로젝트를 생성하고 Todo앱을 만들어 보자 -2-

저번 포스팅에서 Recoil, React-Router, Tailwind, MUI 라이브러리들을 적용했다. 이번 포스팅에서는 이를 이어서 진행해 보자. 먼저, Recoil과 React-Router를 적용하기 위해 Root.js 파일을 따로 생성해 주어야 한다. Root.js 파일은 src 폴더 안에 만들어 준다.

import { RecoilRoot } from "recoil";
import App from "./App";
import { HashRouter } from "react-router-dom";

function Root() {
  return (
    <>
      <RecoilRoot>
        <HashRouter>
          <App />
        </HashRouter>
      </RecoilRoot>
    </>
  );
}

export default Root;

위 코드는 아주 기본적인 설정이다. 이 코드를 그대로 따라 하는 사람도 있겠지만, 왜 이렇게 해야 하는지 궁금한 분들도 있을 거라 생각하기 때문에 가능한 한 자세히 설명해보겠다.

 

import의 의미

"import"는 사전적 의미로는 "수입"이라는 뜻인데, 여기서는 다른 파일이나 라이브러리에서 필요한 요소를 불러오는 것을 의미한다. 첫 번째 줄을 보면 { RecoilRoot } from "recoil"이라고 적혀 있는데, 이것은 Recoil 라이브러리에서 RecoilRoot 요소만 가져와서 사용하겠다는 의미이다.

그다음 function Root를 정의하고 있다. 여기서 선언한 Root는 곧 태그의 이름이 된다. return 구문에서 <App />을 HashRouter와 RecoilRoot로 감싸준다. 순서는 상관없으며, 이렇게 감싸줌으로써 App 안에서는 모두 Recoil과 Router를 사용할 수 있게 된다

 

공식 문서 참고

이와 같은 라이브러리 적용 방법은 해당 공식 홈페이지에서 확인할 수 있다.

• Recoil 공식 홈페이지: https://recoiljs.org/ko/docs/introduction/getting-started
• React Router 공식 홈페이지: https://reactrouter.com/en/main/router-components/hash-router

Recoil 시작하기 | Recoil

 

HashRouter v6.26.2 | React Router

 

 

export default Root;의 의미

마지막에 있는 export default Root;는 이 Root.js 파일을 다른 곳에서 사용할 수 있도록 내보내는 것. 대부분의 리액트 컴포넌트는 이렇게 내보내기를 한다. 소스를 세분화하고 객체화하기 위해 필수적인 과정이다.

 

첫번째 방식

import { RecoilRoot } from "recoil";
import App from "./App";
import { HashRouter } from "react-router-dom";

export default function Root() {
  return (
    <>
      <RecoilRoot>
        <HashRouter>
          <App />
        </HashRouter>
      </RecoilRoot>
    </>
  );
}

 

두번째방식

import { RecoilRoot } from "recoil";
import App from "./App";
import { HashRouter } from "react-router-dom";

function Root() {
  return (
    <>
      <RecoilRoot>
        <HashRouter>
          <App />
        </HashRouter>
      </RecoilRoot>
    </>
  );
}

export default Root;

이 두 코드는 결과적으로 같은 동작을 한다, 하지만 장단점이 있다.

 

방식	설명	장점	단점
export default function Root (Inline Export)	함수를 정의하면서 바로 내보내기	간결하고 선언과 동시에 내보내기 처리	함수 이름을 모듈 내에서 재사용하기 어렵고, 가독성이 떨어질 수 있음
function Root + export default Root; (Separate Export)	함수를 정의한 후 나중에 내보내기	함수 이름을 모듈 내에서 재사용 가능, 가독성 좋음	함수 선언과 내보내기가 분리되므로 코드가 약간 더 길어질 수 있음

 

어느 방식을 선택해야 할까?

간단한 함수나 단일 책임 모듈에서는 export default function Root 방식이 더 적합하다. 코드가 더 간결하고, 함수 정의와 내보내기를 한눈에 파악할 수 있는 장점이 있다..

 

모듈 내부에서 함수를 재사용하거나, 테스트 또는 다른 부분에서 호출해야 한다면 function Root + export default Root 방식을 선택하는 것이 좋다. 내보내기와 함수 정의를 분리하여 모듈 내에서 더 유연하게 사용할 수 있기 때문.

 

사실 크게 유의미 하진 않다. 나 같은 경우는 페이지는 코드 끝에 export를 추가하는 걸로 component를 만들때는 function에 추가하는걸로 해서 개발하고 있다.

 

Root.js 생성 후

Root.js의 생성을 마치면, src 폴더의 index.js 파일도 수정해줘야 한다. 수정하기 전에는 App을 렌더링하고 있었기 때문에, 이제는 우리가 설정한 Root로 바꿔줘야 한다.

수정된 index.js 예시

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Root from './Root';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>
);

 

App.js 수정

수정 후 App이 제대로 렌더링 되는지 확인하기 위해서, 간단하게 App 파일을 수정한다.

function App() {
  return (
    <div>
      <div className="text-6xl">안녕하세요</div>
    </div>
  );
}

이 코드는 단순히 렌더링 확인을 위한 수정이며 이후에 만들 앱과는 관계가 없다

npm start로 앱을 실행하여 "안녕하세요" 문구가 화면에 나타나는지 확인하자.

 

여기까지 개발을 위한 준비 단계라고 보면 된다.

https://github.com/TaeJinAn/happy_note/commit/b5ac8297e6d7cde4984805e6d6a139c3bc86165d

Root.js생성 및 recoil, router 적용 기본 프로젝트 세팅 완료 · TaeJinAn/happy_note@b5ac829

마무리

오늘 포스팅까지는 리액트 개발 프로젝트의 기초 설정이다. 이후 포스팅부터는 본격적으로 개발을 진행할 것이다. 나 역시 리액트를 처음 다루고 있어서, 포스팅을 읽는 독자들을 위해 그리고 나를 위해 포스팅하다 보면 알게 되는 내용이 더욱더 깊고 풍성해 지리라 믿는다.

 

개발을 잘하는 것도 중요하지만, 회사 생활과 대인관계도 무시할 수 없다. 개발 공부가 지겨울 때는 자기계발서적을 읽는 것도 좋은 방법이다. 개발 실력과 함께 성품도 함께 성장시키면, 누구나 데려가고 싶은 개발자가 될 것이다. 우리 모두 개발과 계발 두마리의 토끼를 다 잡아 자신의 value를 한층 더 끌어 올려보자.