11. 07. 23일차 TIL - router, eslint, 반응형 effect의 생명주기

오늘은 React 개인과제를 진행하였다. 이번 과제는 PokemonDex 사이트를 만드는 것이다. 과제를 통해 router의 사용법과 vscode ESlint의 오류를 알 수 있었다. 또한 챌린지반 과제를 진행하면서 반응형 effect의 생명주기에 대해서도 간략하게 학습하였다.

---

1. Router

React Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리이다. 이를 통해 사용자는 페이지를 새로 고치지 않고도 URL을 변경하고 다양한 컴포넌트를 렌더링할 수 있다.

 

1) 주요 개념

• Router
  • React 애플리케이션 라우팅을 관리하는 컴포넌트이다.
  • BrowserRouter와 HashRouter가 일반적으로 사용된다.
  • BrowserRouter는 HTML5의 History API를 사용하여 URL을 관리한다.
  • HashRouter는 URL의 해시 부분을 사용한다.

// 과제로 작성된 코드
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import Dex from "../pages/Dex";
import Details from "../pages/Details";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* Routs */}
        <Route path="/" element={<Home/>}/>
        <Route path="/dex" element={<Dex/>}/>
        <Route path="/pokemon-details" element={<Details/>}/>        
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

•  Route
  • 특정 경로에 대해 어떤 컴포넌트를 렌더링할지를 정의한다.
  • 나는 이번 프로젝트에서 Home 페이지와, Dex 페이지, Details 페이지 총 3페이지를 구현할 예정이다.

<Route path="/" element={<Home/>}/>
<Route path="/dex" element={<Dex/>}/>
<Route path="/pokemon-details" element={<Details/>}

 

• Link 
  • 사용자가 클릭할 수 있는 링크를 생성한다.
  • Link 컴포넌트를 사용하면 페이지를 새로 고치지 않고도 다른 경로로 이동할 수 있다.

// 예시코드
<Link to="/about">About</Link>

 

• Switch
  • 여러 Route 중에서 하나만 렌더링하도록 도와준다.
  • 첫 번째 매칭되는 Route만 렌더링한다.

// 예시코드
<Switch>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
</Switch>

 

• Redirect
  • 특정 경로로 리다이렉트할 수 있는 기능이다.
  • 예를 들어 특정 경로로 접근했을 때 다른 경로로 리다이렉트할 수 있다.

// 예시코드
<Redirect from="/old-path" to="/new-path" />

---

2. vscode Extension - ESLint

ESLint는 코드의 문제점을 미리 찾아주는 정적 분석 도구이다. ESLint Extension을 설치하면 문법 오류를 실시간으로 확인할 수 있는데 쉽게 말해 문법 검사기라고 할 수 있겠다. 하지만 사용 시 불편한 점이 있다. Vite로 생성한 프로젝트는 eslint.config.js 파일에 ESLint의 기본 설정이 세팅되어있는데 이 파일에 react/prop-types가 나를 정말 많이 힘들게 했다..

 

* react/prop-types ?

react/prop-types 는 리액트 컴포넌트의 props에 대한 타입 검사를 강제하는 규칙이다. 이 규칙은 prop-types 패키지를 사용하여 컴포넌트에 전달되는 props의 타입을 정의하고, 잘못된 타입의 props가 전달될 경우 사용자에게 경고해준다. ESLint를 설치하면 이 규칙이 활성화된다.

 

하지만 TypeScript에서는 이 react/prop-types 규칙은 일반적으로 필요하지 않는다. TypeScript가 자체적으로 강력한 타입 시스템props의 타입을 관리하고 검사할 수 있도록 해주기 때문이다. 그렇기 때문에 이 옵션이 활성화가 되어 있더라도 굳이 신경 쓸 필요가 없는 것이다.

 

또 다르게 말하자면 React에서는 이 옵션을 꺼두어야 오류가 없어야하는 상황에서의 오류를 발생시키지 않는다는 것이다... 이걸 몰라서 한참 애먹었다💦그렇다면 이 규칙은 어떻게 끌 수 있을까? 이 규칙을 끄기 위해서는 eslint.config.js 파일에 코드를 수정 또는 추가하면 된다.

rules: {
      // 기존 rules에 추가
      "react/prop-types": "off",
    },

---

3. 반응형 effect의 생명주기

React에서 반응형 이펙트 (Reactive Effects)는 주로 useEffect 훅을 통해 관리된다. 이 훅은 컴포넌트의 생명주기 동안 발생하는 사이드 이펙트를 처리하는 데 사용된다. 여기서 “생명주기”는 컴포넌트가 생성되고 업데이트되며 제거되는 과정에서 useEffect가 어떻게 작동하는지를 나타낸다.

 

1)  마운트 (Mounting)

• 컴포넌트가 처음 렌더링될 때, useEffect가 실행된다.
• 이 시점에서 useEffect의 첫 번째 호출이 발생한다.
• 의존성 배열이 빈 배열인 경우, 이 effect는 컴포넌트가 마운트된 후 한 번만 실행된다.

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
}, []); // 빈 배열을 사용하여 한 번만 실행

 

2) 업데이트 (Updating)

• 컴포넌트의 상태(state)나 props가 변경될 때 useEffect가 다시 실행된다.
• 의존성 배열에 포함된 변수 중 하나라도 변경되면, 이전 effect가 정리된 후 새로운 effect가 실행된다.
• 이 과정은 componentDidUpdate와 유사하다.

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('Count가 업데이트되었습니다:', count);
}, [count]); // count가 변경될 때마다 실행

 

3) 언마운트 (Unmounting)

• 컴포넌트가 DOM에서 제거될 때, useEffect의 정리 함수가 호출된다.
• 이 정리 함수는 주로 타이머 정리, 이벤트 리스너 제거, API 요청 취소, 등을 처리한다.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('타이머가 실행되었습니다.');
  }, 1000);

  return () => {
    clearTimeout(timer); // 타이머를 정리
    console.log('컴포넌트가 언마운트됩니다.');
  };
}, []); // 컴포넌트가 언마운트될 때 정리 함수가 실행

 

✔ 요약

• 마운트 : 컴포넌트가 처음 렌더링될 대 useEffect가 실행된다. 빈 배열을 제공하면 한 번만 실행된다.
• 업데이트 : 의존성 배열에 있는 값이 변경될 매마다 useEffect가 실행된다. 이전 effec가 정리된 후 새로운 effect가 실행된다.
• 언마운트 : 컴포넌트가 DOM에서 제거될 때 정리 함수가 호출되어 리소스를 정리한다.

---

★ 23일차 소감

 

이번에도 뭔가 아기자기하고 깔끔한 layout을 구성하고 스스로 만족할만한 결과물을 만들고 싶다. 하지만 이 프로젝트에 할애할 시간이 그렇게 많아보이지 않는다. 챌린지반에서도 개인프로젝트를 하나 진행하기 때문이다. 늦장부리지말고 집중해서 React 프로젝트를 완성하고, 개인프로젝트에 대해 고민을 하고 싶다. 개인프로젝트로는 어떤 페이지를 구현해볼까... 뭔가 또 아무것도 적혀있지 않은 vscode를 생각하면 막막하지만, 로직을 어떤 식으로 작성할지, 어떤 모습의 페이지가 만들어질지 생각하면 또 기분이 설렌다. 작년에 혼자서 공부할 때는 느끼지 못했던 재미를 느낄 수 있어 너무 만족스럽다ㅎㅎ