React) 69번째 회고

---

1. React.memo

React.memo는 함수형 컴포넌트의 성능을 최적화하기 위한 고차컴포넌트(HOC)이다.

컴포넌트의 props가 변경되지 않았을 때 리렌더링을 방지한다.

 

💡 주요 특징

1. 얕은 비교를 통한 최적화
2. 함수형 컴포넌트에만 사용 가능
3. 커스텀 비교 함수 지원

사용 case	설명
자주 리렌더링되는 컴포넌트	불필요한 리렌더링 방지
무거운 연산을 수행하는 컴포넌트	성능 향상

 

💻 예시 코드

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  /* 렌더링 로직 */
});

// 커스텀 비교 함수 사용
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

React.memo() 현명하게 사용하기

- 참고 : ui.toast.com

리액트 성능 최적화, React.memo()란 ?

- 참고 : neighborkim.log

[React] React.memo란?

- 참고 : ssdragon

---

2. React Life Cycle

React 생명주기는 컴포넌트가 생성되고 업데이트되며 제거되는 과정을 말한다.

클래스 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 Hooks로 대체된다.

 

⭐ constructor는 이전 페이지나 위치에서 속성(props)를 가져오는데, props 안에는 state가 포함되어 있다. 기억!! ⭐

 

📌 주요 생명주기 메소드

단계	메소드	설명
Mounting	constructor, render, componentDidMount, getDerivedStateFromProps	컴포넌트 생성 및 DOM 삽입
Updating	getDerivedStateFromProps, shouldComponentUpdate, componentDidUpdate	props 또는 state 변경 시
Unmounting	componentWillUnmount	컴포넌트 제거

 

💻 예시 코드

class LifecycleComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Lifecycle Component</div>;
  }
}

[React.js] 리액트 라이프사이클(life cycle) 순서, 역할, Hook

- 참고 : minbr0ther.log

[React] 리액트 라이프 사이클

- 참고 : lemon.log

---

3. Memory Leak

메모리 누수는 프로그램이 더 이상 필요하지 않은 메모리를 계속 점유하고 있는 현상을 말한다.

React에서는 주로 비동기 작업이나 이벤트 리스너를 제대로 정리하지 않을 때 발생한다.

 

💡 주요 원인

원인	설명
이해제 이벤트 리스너	컴포넌트 언마운트 후에도 리스너가 남아있음
취소되지 않은 비동기 작업	컴포넌트 언마운트 후 비동기 작업 완료
외부 라이브러리 미정리	라이브러리 인스턴스 미제거

 

💻 예방 방법

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      // 어떤 작업 수행
    }, 1000);

    return () => {
      clearInterval(timer); // 컴포넌트 언마운트 시 타이머 정리
    };
  }, []);

  return <div>My Component</div>;
}

🌸 Memory Leak (메모리 릭, 메모리 누수)란?

- 참고 : 팔만코딩경

---

4. React Hooks : useState, useEffect

Hooks는 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능이다.

 

1️⃣ useState

1. 컴포넌트의 상태 관리
2. 배열 구조 분해를 통해 현재 상태와 업데이트 함수 반환

 

2️⃣ useEffect

1. 부수 효과 처리(데이터 페칭, 구독 설정 등)
2. 컴포넌트 렌더링 후 실행

Hook	주요 기능
useState	상태 관리
useEffect	부수 효과 처리

 

💻 예시 코드

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // count가 변경될 때만 실행

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook의 개요 – React

- 참고 : ko.legacy.reactjs.org

[React] 리액트 훅에 대해 알아보기(React Hooks란?)

- 참고 : choijying21

useState와 useEffect의 차이점

- 참고 : kyeongboo.log

---

5. 컴포넌트가 생성된 후 브라우저에 출력되는 순서

import React, { Component } from 'react';

class MyComponent extends Component{
    state = {
       number : 0
    }

    constructor(props)
    {
        super(props);
        console.log("Constructor Method 호출"); // 첫번째 호출
    }

 
    static getDerivedStateFromProps(nexProps, prevState)
    {
        console.log("getDerivedStateFromProps 호출"); // 두번째 호출
        return null;
    }


    componentDidMount()
    {
        console.log("componentDidMount 호출"); // 마지막으로 호출
    }


    render(){
        console.log("render 호출") //세번째 호출
        return(
            <div>
                <h1>Hello World!! My Name is {this.props.name}</h1>
            </div>
        )
    }
}

export default MyComponent;

 

📌 실행 순서

1️⃣ constructor

1. 가장 먼저 호출된다.
2. 컴포넌트가 마운트 되기 전에 호출된다.
3. 초기 state를 설정하거나 메서드를 바인딩하는 데 사용된다.

 

2️⃣ getDerivedStateFromProps

1. constructor 다음에 호출된다.
2. props로 받아온 값을 state에 동기화시키는 용도로 사용된다.
3. 컴포넌트가 마운트 될 때와 업데이트될 때 모두 호출된다.

 

3️⃣ render

1. 실제 UI를 렌더링 하는 메소드이다.
2. JSX를 반환하여 화면에 표시할 내용을 정의한다.
3. state나 props가 변경될 때마다 호출된다.

 

4️⃣ componentDidMount

1. 컴포넌트가 마운트 된 직후에 호출된다.
2. DOM 노드가 생성되고 브라우저에 나타난 상태이다.
3. 외부 라이브러리 연동, 데이터 구독, 네트워크 요청 등을 수행하기 좋은 위치이다.

 

🌊 코드의 흐름

1. MyComponent 인스턴스가 생성되면 constructor가 호출된다. 여기서 초기 설정이 이루어진다.
2. getDerivedStateFromProps가 호출된다. 이 예제에서는 null을 반환하여 state 변경을 하지 않는다.
3. render 메소드가 호출되어 컴포넌트의 UI를 정의한다. 이때 JSX가 반환되어 가상 DOM에 적용된다.
4. 브라우저 DOM에 컴포넌트가 마운트 된 직후 componentDidMount가 호출된다.
   이 시점에서 컴포넌트는 완전히 렌더링 된 상태이다.

이러한 순서로 메서드가 호출되는 이유는 React의 컴포넌트 생명주기와 관련이 있다.
React는 컴포넌트를 효율적으로 관리하고 렌더링 하기 위해 이러한 순서를 따른다.
초기화(constructor) → 속성 동기화(getDerivedStateFromProps) → 렌더링(render) →
마운트 완료(componentDidMount)의 흐름을 통해 컴포넌트의 정확한 초기화와 렌더링을 보장한다.

---

6. React Router

React Router는 React 애플리케이션에서 라우팅을 구현하기 위한 표준 라이브러리이다.

사용자가 애플리케이션 내에서 다른 페이지로 이동할 수 있게 해 준다.

 

💡 주요 컴포넌트

컴포넌트	설명
BrowserRouter	HTML5 History API를 사용한 라우팅
Route	특정 경로에 컴포넌트 매핑
Link	다른 경로로 이동하는 링크 생성
Switch	매칭되는 첫 번째 Route만 렌더링

 

💻 예시 코드

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

[React] 6. React Router (리액트 라우터) 사용하기

- 참고 : goddaehee

---

7. RESTful (Representational State Transfer)

RESTful은 웹 서비스를 설계하고 구현하기 위한 아키텍처 스타일이다.
웹의 기존 기술과 HTTP 프로토콜을 최대한 활용하여 리소스를 정의하고 처리한다.

 

💡 RESTful의 주요 특징

원칙	설명
클라이언트 - 서버 구조	관심사의 분리
무상태 (Stateless)	각 요청은 독립적이며 이전 요청과 무관
캐시 가능성 (Cacheable)	응답은 캐시 가능 또는 불가능으로 정의
계층화 시스템 (Layered System)	클라이언트는 서버와 직접 통신하는지 알 수 없음

 

🚀 RESTful API 설계 원칙

원칙	설명
리소스 식별	URI를 통해 리소스를 명확히 식별
표현을 통한 리소스 조작	HTTP 메소드를 사용하여 리소스 조작
자기 서술적 메세지	메세지는 스스로를 설명할 수 있어야 함
HATEOAS	애플리케이션의 상태는 Hyperlink를 이용해 전이되어야 함

 

📌 주요 HTTP 메소드

메소드	의미	예시
GET	리소스 조회	GET/users/1
POST	리소스 생성	POST/users
PUT	리소스 전체 수정	PUT/users/1
PATCH	리소스 일부 수정	PATCH/users/1
DELETE	리소스 삭제	DELETE/users/1

 

💻 RESTful API 예시 코드

GET /api/users            // 모든 사용자 조회
POST /api/users           // 새 사용자 생성
GET /api/users/{id}       // 특정 사용자 조회
PUT /api/users/{id}       // 특정 사용자 정보 업데이트
DELETE /api/users/{id}    // 특정 사용자 삭제

 

💻 RESTful API 응답 예시 코드 (JSON)

{
  "id": 1,
  "name": "John Doe",
  "email": "john@example.com",
  "links": [
    {
      "rel": "self",
      "href": "http://api.example.com/users/1"
    },
    {
      "rel": "posts",
      "href": "http://api.example.com/users/1/posts"
    }
  ]
}

 

💡 RESTful 설계의 장점

1. 직관적이고 이해하기 쉬운 API 구조
2. 확장성과 유연성
3. 플랫폼과 언어 독립적
4. 서버와 클라이언트의 역할 분리

 

📌 RESTful API 구현 시 고려사항

1. 적절한 HTTP 상태 코드 사용 (200 OK, 201 Created, 400 Bad Request 등)
2. 버전관리 (ex : /api/v1/users)
3. 페이지네이션, 필터링, 정렬 기능 제공
4. 적절한 인증 및 권한 부여 메커니즘 적용