웹풀스택 일일정리

12주차-파트05: 리액트 CLI(CRA vs Vite),리액트의 mount와 unmount

ddodoi 2024. 11. 8. 23:55

CHAPTER 1. 리액트 CLI, CRA vs Vite

✔️리액트 CLI란?

React CLI(Command Line Interface)라는 용어는 공식적으로 React에 포함된 도구는 아니지만, React와 관련된 여러 개발 작업을 명령어로 쉽게 수행하도록 돕는 다양한 CLI 도구를 지칭하는 데 사용된다. CRA, Vite, Next.js, Gatsby 등이 있다.

 

 

 

✔️CRA(Create React App)

  • 리액트 애플리케이션을 쉽게 설정하고 시작할 수 있도록 도와주는 공식적인 명령줄 도구이다.
  • 복잡한 설정이나 번거로운 초기 설정 없이 리액트 프로젝트를 빠르게 시작할 수 있도록 환경을 자동으로 구성해 준다. *Webpack과 **Babel을 사용하여 개발 서버를 실행해주고 *HMR(Hot Module Replacement=Hot Module Reloading)을 제공해준다. CRA는 HMR시 소스 전체를 빌드한다.
  • 언어로 node.js을 사용한다.
  • process.env.KEY라는 환경변수를 사용한다.

 

*Webpack :

Webpack은 **모듈 번들러(Module Bundler)**로, 다양한 자원을 하나의 번들로 묶어주는 역할을 한다. 개발 환경에서는 소스 코드가 여러 파일로 분리되어 있지만, 웹 브라우저가 효율적으로 파일을 불러오도록 웹팩이 이 파일들을 하나의 번들로 묶어주는 것이다.

 

*Babel : Babel은 JavaScript 트랜스파일러로, 최신 JavaScript 코드를 이전 버전으로 변환해주는 역할을 합니다. 최신 문법을 지원하지 않는 구형 브라우저에서도 코드가 실행될 수 있도록, ES6+ 문법을 ES5 이하로 변환해줍니다.

 

*HMR : 모듈을 다시 불러오지 않고도 어플리케이션을 실시간으로 업데이트 할 수 있도록 도와주는 기능. 개발자가 애플리케이션의 코드를 수정하면, 새로고침 없이 변경 사항을 즉시 애플리케이션에 반영할 수 있게 해 준다.

 

 

 

✔️Vite

  • 프론트엔드 개발 환경을 제공하는 빌드 도구로 빠른 속도와 효율을 자랑한다. ESBuild를 사용해 Webpack대신 rollup으로 빌드한다.
  • Webpack에 비해 속도가 크게 개선되었다.
  • HMR에서 빠른 속도. HMR에서 소스 전체를 빌드하는 CRA와 달리, Vite에서는 HMR에서 모듈 단위로 빌드해 브라우저에 제공한다.
  • 언어로 Golang을 사용한다.
  • import.meta.env.KEY라는 독특한 고유의 환경변수 사용

 

 

 

 

CHAPTER 2. 프로젝트 파일 구조

  1.  pages - 라우트에 대응하는 페이지 컴포넌트(컨테이너)
  2. components - 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
  3. utils - 유틸리티
  4. hooks- 리액트 훅
  5. model - 모델(타입)
  6. api - api 연동을 위한 fetcher 등

 

 

 

CHAPTER 3. 리액트의 mount, unmount

컴포넌트의 생명주기: 생성 -> 업데이트 -> 제거과정

 

📌Mount(마운트)

컴포넌트가 처음으로 생성되어 DOM(화면)에 추가되는 순간을 의미

 

<Mount 시점에서 할 수 있는 작업>

✔ API 호출 (데이터 가져오기)
✔ 이벤트 리스너 등록
✔ 타이머 설정 (setTimeout, setInterval)
✔ 상태(state) 초기화

 

 

 

 

📌Unmount(언마운트)

컴포넌트가 화면에서 사라지는 순간을 의미

 

<Unmount 시점에서 할 수 있는 작업>

✔ 타이머 해제 (clearTimeout, clearInterval)
✔ 이벤트 리스너 제거 (removeEventListener)
✔ 메모리 정리 (불필요한 데이터 삭제)

 

 

예제)

function Component() {
    useEffect(() => {
        console.log("✅ 컴포넌트가 마운트됨!");

        return () => {
            console.log("❌ 컴포넌트가 언마운트됨!");
        };
    }, []);

    return <div>안녕하세요!</div>;
}

 

위의 코드에서 실행 과정은 다음과 같다.

🛠️ 실행 과정

  1. Component가 마운트되면 "✅ 컴포넌트가 마운트됨!" 출력
  2. Component가 언마운트되면 "❌ 컴포넌트가 언마운트됨!" 출력