브라우저 API 통신방법중 자주 사용하는 비동기 처리 방식에 대해서 알아보자!

동기와 비동기

1) 동기(Synchronous)란?

• 작업이 순차적으로 실행되는 방식이다. (순서 보장)
• 현재 작업이 끝나야 다음 작업을 실행할 수 있다.
• 결과를 즉시 확인할 수 있다.

2) 비동기(Asynchronous)란?

• 작업이 독립적으로 실행되는 방식이다. (순서 보장X)
• 작업 요청 후 결과를 기다리지 않고 다른 작업을 동시에 처리한다.
• 비동기 처리란? 비동기로 작업을 요청하고, 작업이 완료되면 이후에 값을 처리하는 방식을 말한다.

** 정리 **

• 기본적으로 모든 언어는 실행 흐름에 따라 동기 실행이 원칙

  // 실행 순서: 1 → 2 → 3 (순차 실행, 동기)
  public class SyncExample {
    public static void main(String[] args) {
        System.out.println("1. 시작");
        System.out.println("2. 실행");
        System.out.println("3. 종료");
    }
  }

• JavaScript는 기본적으로 동기 실행이지만, 비동기 처리가 기본 내장됨

• 그 외 언어에서 비동기 실행은 명시적으로 작성해야 동작함 (예: Java에서 Thread, CompletableFuture 사용)

Q. Javscript 만 비동기 기능을 포함하는 이유? 원래 웹 브라우저에서 실행되는 언어로 개발된 JS는 싱글스레드 언어로 한번에 하나의 작업만 처리할 수 있다. 브라우저에서 UI 조작, 네트워크 요청, 사용자 입력 등을 모두 처리해야하는데 동기로 처리하기에 작업을 기다리며 다른 작업이 Blocking 처리되어 브라우저가 멈추게됨. 따라서 비동기 기능을 기본으로 제공하여 원활한 사용자 경험이 가능함

콜백함수

콜백함수란, 다른 함수에 인자로 전달되어 특정 이벤트가 발생하거나 작업이 완료된 후 호출되는 함수를 의미한다. 주로 비동기 프로그래밍에서 많이 사용되며, 함수의 실행 흐름을 제어하는 데 활용한다.

1) 일반 콜백함수 일반 콜백함수는 함수의 재사용이 가능하다.

function greet(name, callback) {
     console.log(`${name}님 안녕하세요`)
      callback();
}

greet('희망', () => {
    console.log("사전적 영어 이름은 Hope 입니다.")
})

greet('희망', () => {
    console.log("회사 이름은 Gabi 입니다.")
})

2) Array의 고차 함수 콜백

const numbers = [1,2,3,4,5];

const squaredNumbers = numbers.map(num => num * num);

3) 비동기 콜백 비동기 함수 실행 후, 후처리 함수로 주로 사용한다.

function printMe() {
 console.log("Hello World!") 
}

setTimeout(printMe, 3000) // 비동기함수 호출
console.log("대기중...")

// console 결과
대기중...
Hello World!

그러나 콜백함수로 비동기를 처리할때 단점이 있다. 바로 콜백지옥에 빠질수 있다는 점이다. 😈 콜백 지옥은 비동기 함수를 사용하여 순차로 처리해야할 여러 로직이 중첩으로 호출되면서 로직이 깊어지는 현상을 이야기한다.

function getUser(userId, callback) {
    setTimeout(() => {
        console.log("사용자 정보 가져오기");
        callback({ id: userId, name: "홍길동" });
    }, 1000);
}

function checkPermission(user, callback) {
    setTimeout(() => {
        console.log("권한 확인");
        callback({ ...user, permission: "admin" });
    }, 1000);
}

function saveData(user, callback) {
    setTimeout(() => {
        console.log("데이터 저장 완료");
        callback("저장 성공!");
    }, 1000);
}

// 콜백 중첩 (콜백 지옥 발생)
getUser(1, (user) => {
    checkPermission(user, (userWithPermission) => {
        saveData(userWithPermission, (result) => {
            console.log(result);
        });
    });
});

콜백함수는 유지보수가 어렵고, 가독성이 떨어져 현업에서 사용하길 지양한다.

Promise

콜백함수의 단점으로 ES6에서 탄생한 비동기 처리 함수이다. 순차처리할 로직을 중첩으로 호출하는 것이 아니라, Promise 체이닝인 then을 연속적으로 호출하며 가독성이 좋아졌다.

function getUser(userId) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("사용자 정보 가져오기");
            resolve({ id: userId, name: "홍길동" });
        }, 1000);
    });
}

function checkPermission(user) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("권한 확인");
            resolve({ ...user, permission: "admin" });
        }, 1000);
    });
}

function saveData(user) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("데이터 저장 완료");
            resolve("저장 성공!");
        }, 1000);
    });
}

// Promise 체이닝으로 해결
getUser(1)
    .then(checkPermission) // (data) => checkPermission(data) 로 같은 로직 
    .then(saveData)
    .then(console.log)
    .catch(console.error);

Async/await

Promise 를 좀 더 진화한 ES8 문법으로 async 함수를 선언 한 후 Promise를 리턴하는 함수를 await 처리하면 된다.

async/await 함수는 비동기 코드를 동기 코드처럼 읽을 수 있다. try-catch를 사용하여 에러 핸들링을 할 수 있다.

async function process() {
    try {
        const user = await getUser(1);
        const userWithPermission = await checkPermission(user);
        const result = await saveData(userWithPermission);
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

process();

Promise vs Async/await

그럼 무조건 최신버전인 async/await를 쓰면 될까?? 실제 현업에서 보면 Promise then 체이닝을 종종 쓰는걸 접할 수 있다. 그럼 두개의 차이와 언제 쓰면 좋을까?

결론은 두개의 비동기 처리 함수는 실행 흐름에서 차이가 있다.

Promise

• then() 체이닝을 통해 비동기 결과를 처리
• 비동기 작업이 끝날 때까지 기다리지 않고 바로 다음 코드가 실행됨
• 비동기 작업이 완료된 후 then() 내부 코드 실행됨

언제쓸까?

• 비동기 작업을 여러 개 병렬로 실행해야할 때 (Promise.All)
• Promise 기반 API 를 그대로 활용해야할 때
• 간단한 비동기 로직 처리 (체이닝이 많지 않을때)

Async/await

• await을 만나면 해당 함수 내부에서 일시 정지 후 기다림 (동기적으로 실행)
• 하지만, 함수 바깥의 코드(다음 코드)는 먼저 실행됨
• 비동기 작업이 완료되면, await이 있던 자리에서 다시 동기적으로 실행됨

언제쓸까?

• 가독성이 중요한 코드, 즉 복잡한 비즈니스 로직일 경우 (동기 코드처럼 작성 가능)
• 함수가 길어질때
• 예외처리를 try-catch로 쉽게 하고싶을때
• 비동기 함수 내부에서 여러 개의 await를 순차적으로 처리하고싶을때

Axios

axios는 현재 가장 많이 사용되고있는 HTTP 클라이언트이다. 라이브러리의 특징은 HTTP 요청을 Promise 기반으로 처리한다는 점이다. (비동기 요청)

Custom Hook

커스텀훅은 React에서 중복되는 로직을 재사용하기 위해 사용하는 함수이다.

커스텀훅은 언제 사용해야할까?

• 동일한 로직이 여러 컴포넌트에서 반복될때
• 비즈니스 로직을 컴포넌트에서 분리하고 싶을때
• 컴포넌트 내부의 코드가 너무 복잡할 때
• API 요청, 상태관리, 이벤트 리스너, 타이머등 부가 로직을 분리하고 싶을때
• 렌더링 로직과 UI로직을 분리하여 유지보수를 쉽게 하고 싶을때

사용예제 1. 중복된 API 요청 코드

import { useEffect, useState } from "react";

function Users() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json())
            .then((data) => setUsers(data));
    }, []);

    return <div>{users.length}명의 사용자</div>;
}

function Posts() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then((res) => res.json())
            .then((data) => setPosts(data));
    }, []);

    return <div>{posts.length}개의 게시글</div>;
}

import { useEffect, useState } from "react";

function useFetch(url) {
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
            .then((res) => res.json())
            .then((data) => {
                setData(data);
                setLoading(false);
            });
    }, [url]);

    return { data, loading };
}

function Users() {
    const { data: users, loading } = useFetch("https://jsonplaceholder.typicode.com/users");
    if (loading) return <div>Loading...</div>;
    return <div>{users.length}명의 사용자</div>;
}

function Posts() {
    const { data: posts, loading } = useFetch("https://jsonplaceholder.typicode.com/posts");
    if (loading) return <div>Loading...</div>;
    return <div>{posts.length}개의 게시글</div>;
}

사용예제 2. 중복된 이벤트 리스너 코드

import { useEffect, useState } from "react";

function ComponentA() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return <div>창 너비: {width}px</div>;
}

function ComponentB() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return <div>컴포넌트 B 창 너비: {width}px</div>;
}

import { useEffect, useState } from "react";

function useWindowSize() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return width;
}

function ComponentA() {
    const width = useWindowSize();
    return <div>창 너비: {width}px</div>;
}

function ComponentB() {
    const width = useWindowSize();
    return <div>컴포넌트 B 창 너비: {width}px</div>;
}

util과 다른점? 유틸함수는 리액트와 관계없이 순수 함수 형태이다. 일반적으로 데이터 가공, 변환, 계산 등을 수행할 때 사용한다. 따라서 그냥 데이터를 변환/처리 하는 함수라면 유틸함수를 만들어서 사용한다.

immer란 리액트 상태관리 중 불변성을 유지하도록 하기위한 라이브러리이다.

리액트의 불변성이란?

리액트의 불변성이란 리액트가 컴포넌트를 정상적으로 렌더링시키기 위해 기존 상태 값을 유지시키면서, 새로운 상태 값을 추가하는 것을 의미한다.

아래와 같은 예제를 보자. 어떤 상품을 찜하기 버튼을 눌러 patch API를 호출하여 DB를 업데이트가 필요하다.

• 찜하기 Button을 통해 상품의 위시값 DB 변경을 위한 patch API를 호출
• patch API가 성공할때 이전에 요청했던 해당 상품의 상세정보 응답 캐시중 wish 값만 수정하여 캐시에 저장함 (조회 API 재요청X)

const ProductDetails = ({ product }) => {
  const queryClient = useQueryClient()

  const toggleWishHandler = async () => {
    try {
      await api.patchProductWish({ ...product, wish: !product.wish })

     // query cache 갱신
       queryClient.setQueryData(
         queryKey,
         (data: ProductDetailResponse) => {
          return {
            ...data,
            productInfo: {
              ...data.productInfo,
              wish: !data.productInfo.wish
            }

         }
         )

    } catch (e) {
     ....
    }
  }

  return (
    <div>
      <p>{product.name}</p>
      <button onClick={toggleWishHandler}>찜하기</button>
    </div>
  )
}

위에 경우처럼 불변성을 유지하기 위해 중첩된 데이터 모두 새로 갱신해줘야 하기 때문에 번거로움이 있다.

중첩함수 깊이가 깊어지면 유지보수도 어려울 뿐더러 코드 가독성이 굉장히 떨어지게 된다.

이때 사용하는 것이 immer 이다!

immer를 사용하면 아래와같이 변경가능하다.

import { produce } from "immer";

const ProductDetails = ({ product }) => {
  const queryClient = useQueryClient();

  const toggleWishHandler = async () => {
    try {
      await api.patchProductWish({ ...product, wish: !product.wish });

      // query cache 갱신 (immer 적용)
      queryClient.setQueryData(queryKey, (data) =>
        produce(data, (draft) => {
          draft.productInfo.wish = !draft.productInfo.wish;
        })
      );
    } catch (e) {
      // 에러 처리
      console.error(e);
    }
  };

  return (
    <div>
      <p>{product.name}</p>
      <button onClick={toggleWishHandler}>찜하기</button>
    </div>
  );
};

복잡한 스프레드 문법이 produce 함수를 통해 간단히 처리되었다.

프론트엔드 개발자라면 많은 양의 데이터를 렌더링할때 브라우저가 멈춰버리는 현상을 종종 경험할 수 있다. 개인적으로 페이지네이션없이 많은 양의 데이터를 렌더링해서 편집하는 페이지는 좋지 않은 UI/UX 라고 생각하지만, 그래도 종종 다뤄야할 때가 있다. 이때 최적화를 어떻게 하는지 공부해보았다.

우선 본격적으로 들어가기 앞서 중요한 점은 모든 컴포넌트를 최적화 할 필요는 없다.

주로 현업에서는 많은 양의 데이터를 한번에 렌더링하는 경우는 거의 없으며 API를 통한 페이지네이션 처리 또는 Lazy 렌더링 등 최소한의 렌더링을 하는 기술을 사용하기 때문이다.

그래도 최적화가 필요한 경우는 반복되는 List, ListItem, Table, Tr 등에 주로 사용되며 화면상 렌더링되는 건수가 2000건 이상일때 고려해보는 것이 좋다.

그렇지 않을경우, 오히려 메모이제이션은 독이 될 수 있으니 유의하자!

1. 최적화 방법

많은 양의 컴포넌트가 리렌더링되는 영역에서 최적화가 필요하다.

리액트 리렌더링 조건

• props 가 바뀔때
• state 가 바뀔때
• 부모 컴포넌트가 리렌더링 될때
• forceUpdate() 함수가 실행 될때

주소 정보를 변경할 수 있는 UserList 예제를 보자.

// 3000건의 user dummy 데이터 생성 
const getUsers = () => {
    return Array.from({ length: 3000 }, (_, i) => ({
        number: i + 1,
        name: `홍길동${i + 1}`,
        address: '',
    }));
};

const List = () => {
    const [users, setUsers] = useState(getUsers());

    const addressHandler = (input: string, index: number) => {
        const newUsers = users.map((user, i) => i === index ? {...user, address: input} : user)
        setUsers(newUsers);
    };

    return (
        <div>
            {users.map((user, index) => (
                <User
                    key={user.number}
                    {...user}
                    addressHandler={(value) => addressHandler(value, index)}
                />
            ))}
        </div>
    );
};

const User = ({
                  name,
                  address,
                  addressHandler,
              }: {
    name: string;
    address: string;
    addressHandler: (value: string) => void;
}) => {
    return (
        <div style={{
            border: '1px solid grey',
            padding: '4px',
            display: 'flex',
            flexDirection: 'column',
        }}>
            <p>{name}</p>
            <input
                type="text"
                value={address}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                    addressHandler(e.target.value)
                }
            />
        </div>
    );
};



export default List;

해당 코드를 실행해보면 3000건의 User 리스트가 렌더링되고 각각 address를 입력받는 input을 가지고 있다. 이때 아무 인덱스의 Address 정보를 변경하면 아래와 같은 결과가 나타난다.

하나의 데이터만 변경했는데 3000건의 아이템들이 전부다 리렌더링 되고있다. 불필요한 시스템 자원이 낭비되고 있으며, 사양에 따라 다르지만 사양이 낮은 컴퓨터에서는 굉장히 버벅거리고 사용자경험이 떨어질 수 있다.

또한 개발된 설계에 따라 다른 컴포넌트에서 변경한 데이터로 인해 List 또한 함께 리렌더링이 발생하며 브라우저가 뻗어버리는 경우가 발생할 수도 있다.

List 컴포넌트에 Job state 값을 추가했더니 job을 바꿀때마다 UserList 가 리렌더링 되는것을 볼 수 있다.

React.memo

memo 함수는 컴포넌트를 메모이제이션 한다. props 값이 변하지 않으면 이전에 메모이제이션 한 컴포넌트를 재사용하기 때문에 리렌더링 하지 않는다.

const List = React.memo(() => {
    const [job, setJob] = useState('developer')
    const [users, setUsers] = useState(getUsers());

    const addressHandler = (input: string, index: number) => {
        const newUsers = users.map((user, i) => i === index ? {...user, address: input} : user)
        setUsers(newUsers);
    };

    return (
        <div>
            <label>
                <input name="job" type="radio" value="developer" checked={job === 'developer'} onChange={() => setJob('developer')} />
                개발자
            </label>
            <label>
                <input name="job" type="radio" value="doctor" checked={job === 'doctor'} onChange={() => setJob('doctor')}/>
                의사
            </label>
            <label>
                <input name="job" type="radio" value="lawyer" checked={job === 'lawyer'} onChange={() => setJob('lawyer')}/>
                변호사
            </label>
            <br/>
            <br/>
            <br/>
            <div>
                {users.map((user, index) => (
                    <User
                        key={user.number}
                        {...user}
                        addressHandler={(value) => addressHandler(value, index)}
                    />
                ))}
            </div>
        </div>
    );
});



const User = React.memo(({
                  name,
                  address,
                  addressHandler,
              }: {
    name: string;
    address: string;
    addressHandler: (value: string) => void;
}) => {
    return (
        <div style={{
            border: '1px solid grey',
            padding: '4px',
            display: 'flex',
            flexDirection: 'column',
        }}>
            <p>{name}</p>
            <input
                type="text"
                value={address}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                    addressHandler(e.target.value)
                }
            />
        </div>
    );
});


User.displayName = 'User';
List.displayName = 'List';

Props에 전달하는 함수는 인자값에 참조값 대신 함수형 넣기

위에 예제에서 User 컴포넌트에서 addressHandler 함수는 users state 값을 참조한다. 따라서 users 가 바뀌게 되면 해당 메서드 또한 새로 생성되어 props 에 전달되고 자식 컴포넌트를 리렌더링 시킨다.

이때 해결할 수 있는 방법은 참조값 대신 콜백 함수를 넣어주면 된다.

AS-IS

// users를 참조함
    const addressHandler = (input: string, index: number) => {
        const newUsers = users.map((user, i) => i === index ? {...user, address: input} : user)
        setUsers(newUsers);
    };

TO-BE

// users를 참조하지 않고 콜백함수를 통해 처리함
    const addressHandler = useCallback((input: string, index: number) => {
        setUsers((users) => users.map((user, i) => i === index ? {...user, address: input} : user));
    }, []);

react-virtualized 라이브러리 사용하기

위에 방법 이외에 외부 라이브러리를 사용하여 lazy rendering 하는 기법도 있다. 해당 라이브러리는 화면상 보이는 부분만 초기 렌더링하고, 스크롤시 추가로 렌더링하는 기법이다.

주의할점

리액트는 얕은비교를 통해 props의 변경을 감지하기 때문에 데이터 타입이 Array, Object일때 중첩된 Array, Object 또한 모두 새로운 참조값을 생성해야한다.

const [response, setResponse] = useState({
    data: {
        data: {
          contents: [...]
        },
          pageSize: 10,
          page: 0
    },
      httpStatus: 200,
      error: null
})

// 불변성을 유지하는 법
const newState = {
  ...response,
  data: {
    ...response.data,
      contents: [...response.data.contents]
  }
}

중첩된 데이터가 참조형일때 새로운 객체를 복사하기에 까다로움이 있어 추후 immer 외부 라이브러리를 사용한다.

2. 성능 확인법

개발자 도구 > Perfomence 탭에서 확인

3. 그 밖에 useTransition 을 사용하는 방법이 있다.

최적화는 아니지만, 그 밖에 UI를 차단시키지 않고 사용자 경험을 개선시키는 방법중 하나는 useTransition 을 사용하는 방법이 있다. JS는 싱글스레드 언어이기 때문에 동시에 작업을 처리하지 못한다. 이 방법은 처리 흐름중에 발생하는 렌더링의 우선순위를 뒤로 미뤄 화면이 멈추는 현상을 막는 방법이다.

사용법은 우선순위를 미룰 로직에 startTransition 함수를 사용하여 콜백처리하면 된다.

List 컴포넌트에 address 값을 일괄로 처리하는 input 을 넣어보겠다.

const List = React.memo(() => {
    const [bulk, setBulk] = useState('')
    const [resultMessage, setResultMessage] = useState('');
    const [users, setUsers] = useState(getUsers());
    const [isPending, startTransition] = useTransition();

    const addressHandler = useCallback((input: string, index: number) => {
        setUsers((prevState) => prevState.map((user, i) => i === index ? {...user, address: input} : user));
    }, []);

    const bulkUpdateHandler = () => {
        try {
            startTransition(() => {
                setUsers(prevState => prevState.map(user => ({...user, address: bulk})))
            })
            setResultMessage("업데이트 성공")
        } catch (e) {
            setResultMessage("업데이트 실패")
        }
    }

    return (
        <div>
            <span>일괄 변경</span>
            <input type="text" placeholder="주소를 입력하세요" value={bulk} onChange={(e) => setBulk(e.target.value)}/>
            <button type="button" onClick={bulkUpdateHandler}>적용</button>
            <p style={{color: 'red', marginBottom: '20px'}}>{resultMessage}</p>
            <div>
                {users.map((user, index) => (
                    <User
                        key={user.number}
                        {...user}
                        addressHandler={(value) => addressHandler(value, index)}
                    />
                ))}
            </div>
        </div>
    );
});

useTransition 미적용시 미적용시 resultMessage가 List 리렌더링 이후에 나타난다.

useTransition 적용시 미적용시 resultMessage가 나타나고 이후에 List가 리렌더링된다. (UI 차단 막을 수 있음)

리액트, Next를 처음 시작하면 알아야 할 중요한 개념이다. 개발을 하면서도 하이드레이션이 뭔가 느낌이 와닿지 않았다. 그래서 공부해보려고 한다!

Hydration이란 사전적 의미로 수분공급이라고 한다. 처음에 수분공급이라는 말이 너무 문학적인 표현의 용어 같아서 와닿지 않았다ㅋㅋ

또한 하이드레이션은 CSR 서비스에서는 접하기 어렵다. 그래서 신규 프로젝트가 SSR로 작업하게 되면서 하이드레이션 에러도 만나고... 차츰 접하게 되었다.

Hydration

1. Hydration이란?

정의

서버에서 HTML을 생성하여 클라이언트에게 전달하면 이 HTML을 클라이언트가 가지고 있는 HTML(Dom Tree 객체)과의 비교작업 후, 완전 일치할때 다운로드 받은 JS Chunk 파일을 Dom Tree에 연결시켜 인터렉티브 가능한 상태로 만드는 연결 작업이다.

하이드레이션이 완료 된 후, 리액트 클라이언트 측 기능 (클릭, 상태변화 등) 이 동작하게 된다.

Hydration 발생 조건

✅ 조건1 : 서버에서 생성된 HTML이 있고 ✅ 조건2 : React가 클라이언트에서 해당 HTML을 다시 연결해야 하는 경우

즉, React가 클라이언트에서 "이 HTML을 다시 조작할 가능성이 있을 때" Hydration이 발생한다.

Hydration이 발생하지 않는 케이스

정적 HTML

<!DOCTYPE html>
<html>
<head>
  <title>정적 페이지</title>
</head>
<body>
  <h1>이 페이지는 Hydration이 필요 없음</h1>
</body>
</html>

CSR 으로만 이뤄진 리액트(Next) 애플리케이션

'use client'
const React from 'react'

const CSRApplication = () => {
    return <div>안녕하세요</div>
}

정적 페이지에서 Hydration이 발생하지 않게 하려면?

output: "export" 사용 (Next.js 13+) 또는 export const runtime = 'edge'; 사용 이 설정을 하면 Next.js는 정적 HTML만 생성하고, React는 실행되지 않으므로 Hydration이 발생하지 않음

{
  "output": "export"
}

// 컴포넌트 내에서
export const runtime = 'edge';

export default function Page() {
  return <h1>Next.js 정적 페이지</h1>;
}

특정 컴포넌트에서 Hydration 방지 (useEffect) 이렇게 하면 초기 정적 HTML은 렌더링되지만, Hydration이 일어나지 않고 클라이언트에서 다시 렌더링됨

import { useEffect, useState } from "react";

export default function Page() {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return mounted ? <h1>클라이언트에서만 렌더링</h1> : <h1>정적 HTML</h1>;
}

2. Hydration 탄생이유?

웹애플리케이션이 빠르게 성장하면서 SPA 웹의 사용이 증가하였고, SPA 와 궁합이 잘 맞는 CSR 렌더링 기법이 주로 사용되었다.

그러나 CSR의 한계로 이를 극복하기 위해 SSR 도입이 필요하였고, 이 과정에서 리액트는 하이드레이션이라는 기술을 탄생시켰다.

CSR(Client-Side Rendering) 방식이란?

• 사용자가 브라우저에서 페이지를 요청하면, 서버는 빈 HTML과 JavaScript 번들 파일을 보냄.
• 브라우저가 JavaScript를 다운로드하고 실행해야 화면을 렌더링할 수 있음.
• 모든 DOM 요소와 이벤트 핸들러가 클라이언트에서 생성됨.

CSR 문제점

초기 로딩속도가 느림

사용자에게 빈 HTML 을 먼저 보내고 이후 JS 가 실행되고 렌더링 되므로, 첫화면이 보이기까지 오래 걸리는 문제점이 있다.

SEO(검색 엔진 최적화)에 불리함

검색엔진은 페이지를 크롤링할 때 HTML 을 분석하는데, CSR 방식에서는 HTML이 빈 상태이기 때문에 SEO에 불리하다.

백엔드 서버의 역할 부족

모든 렌더링이 클라이언트에서만 이루어지므로, 서버는 단순한 정적 파일 제공자 역할만 하게 된다.

CSR 문제를 극복하기 위해 SSR, SRG 등장

SSR(Server-Side Rendering) 방식이란?

• 사용자가 브라우저에서 페이지를 요청하면 서버가 실제 HTML을 만들어서 반환
• 브라우저는 HTML 을 즉시 렌더링

SSG(Static-Site-Generation) 이란?

• 미리 빌드 시점에 HTML을 생성하여 정적 파일로 배포
• 사용자가 요청 즉시 HTML을 제공하므로 가장 빠르다.

SSR, SSG에서 인터랙티브한 기능이 필요해!

리액트는 이벤트핸들러, 상태 등 인터렉티브 기능들이 모두 Client-Side에서 동작해야 한다. 따라서 CSR 한계를 극복하기 위해 SSR, SSG가 나오게 되었고 인터렉티브 기능까지 동작하게 하기위해 Hydration 과정을 도입하게 되었다.

정리와 의문점

Q1. 인터렉티브 코드가 없으면 Hydration은 일어나지 않는가?

export default function Page() {
  return <h1>Next.js 정적 페이지</h1>;
}

Answer Next.js 같은 경우 기본적으로 모든 페이지를 React 애플리케이션으로 간주한다. 위에 코드도 React 컴포넌트이며, 서버에서 HTML을 받아 전달 되었다면 인터렉티브가 없어도 리액트는 이를 클라이언트에서 다시 연결해야 된다고 판단한다.

Q2. 그럼 리액트 관리 코드는 모두 Hydration이 일어나는가? Answer React가 모든 페이지를 관리한다고 해서 Hydration이 항상 일어나는 것은 아니다. React가 관리하는 방식에 따라 3가지 경우로 나눌 수 있다.

서버에서 HTML을 미리 만들지 않고 클라이언트에서 React가 처음부터 렌더링한다면 하이드레이션이 발생하지 않는다.

데이터의 라이프사이클은 메모리 관리 및 성능에 영향을 끼치기 때문에 모든 언어에서 중요한 지식이다. 개발자가 데이터의 라이프사이클 이해를 바탕으로 설계를 진행하고 개발해야 좋은 어플리케이션이 탄생한다.

라이프사이클이란?

컴포넌트가 생성되고 초기화되며 사용된 뒤 소멸되는 과정이다.

중요한 이유

• 리소스 관리
• 성능 최적화
• 애플리케이션 안정성

리액트의 라이프사이클 메서드

리액트는 클래스형 컴포넌트에서만 라이프사이클 메서드를 지원한다. 대신 함수형 컴포넌트에서도 대체할 만한 Hooks 들이 있으니 걱정하지 말자!

리액트의 라이프사이클 메서드는 크게 3종류로 나뉜다.

• Mount : 컴포넌트가 생성, 초기화되고 첫 렌더링될때
• Update : 생성된 컴포넌트에서 데이터가 변경됨에 따라 리렌더링 할때
• UnMount : 컴포넌트가 소멸될때 발생

1. Mount 시 실행되는 함수

constructor

• 컴포넌트 생성자 메서드로 클래스형 컴포넌트를 처음 생성할때 실행됨
• 초기 State 값 설정에도 사용

  getDerivedStateFromProps

• props에서 받아온 값으로 state 값을 동기화시킬때 사용함
• 컴포넌트가 마운트, 업데이트 될때 호출됨

getDerivedStateFromProps 요소만 static 인 이유? React 컴포넌트에서 해당 메서드가 컴포넌트의 인스턴스와는 독립적으로 동작해야 하기 때문이다. getDerivedStateFromProps는 컴포넌트가 렌더링되기 전에 호출되어 새로운 props를 기반으로 state를 업데이트하는 역할을 한다. 이 메서드는 인스턴스와 관련된 속성(예: this)에 접근할 필요가 없다. 단순히 props와 state만 받아서 새로운 state 객체를 반환하면 된다.

• 일반 메서드: this를 통해 인스턴스의 상태나 메서드에 접근.
• 정적 메서드(static): 인스턴스 없이 클래스 차원에서 호출.

render

• JSX, 커스텀 컴포넌트, null 등을 반환하는 컴포넌트 모양새를 정의하는 함수
• 유일하게 함수중 필수값

componentDidMount

• 마운트시 제일 마지막 단계에서 실행됨
• 컴포넌트가 렌더링이 끝난 후 실행됨
• 주로 자바스크립트 라이브러리 호출, setTimeout, setInterval, 네트워크 요청등 비동기 작업을 처리함

2. Update 시 실행되는 함수

컴포넌트가 리렌더링(Update)가 발생하는 케이스

1. props가 변경될때
2. state가 변경될때
3. 부모 컴포넌트가 리렌더링될때
4. this.forceUpdate()가 실행될때

getDerivedStateFromProps

• props에서 받아온 값으로 state 값을 동기화시킬때 사용함

shouldComponentUpdate

• props 또는 state 값이 업데이트 될때 렌더링 할지 말지 여부를 결정함
• 해당 메서드는 boolean 타입을 리턴함
• false를 리턴하면 이후 작업은 중지됨

render

• 데이터가 변경된 내용을 반영하여 JSX를 다시 생성

getSnapshotBeforeUpdate

• render에서 만들어진 결과물이 브라우저에 실제로 반영되기 전에 실행됨
• 이 메서드에서 반환한 값은 componentDidUpdate에서 사용가능함
• 주로 DOM이 렌더링 되기전에 스크롤 위치 등을 조정하기 위해 사용함

  componentDidUpdate

• 리렌더링 완료한 후 실행됨
• 렌더링이 모두 끝났기 때문에 DOM 관련 처리를 해도됨
• prevProps, prevState 를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있음
• getSnapshotBeforeUpdate 단계에서 반환된 값을 전달받아 사용할 수 있음

3. Unmount 시 실행되는 함수

componentWillUnmount

• DOM이 제거되기전 실행됨
• 주로 componentDidMount 에서 등록한 이벤트, 타이머 등을 제거하는 작업을 수행함

4. 에러시 실행되는 함수

componentDidCatch

• 컴포넌트가 렌더링중 예기치못한 에러가 발생했을때 애플리케이션이 먹통이 되는것 이 아니라, 에러 메세지 노출, 에러페이지 리다이랙트 등 예외처리 할 수 있음
• 에러로그 수집 등 서비스 운영에 필요한 작업을 할 수 있음
• 단, 해당 컴포넌트가 선언된 에러는 감지를 못하고, 컴포넌트 내에 하위 children 컴포넌트에서 발생한 에러만 감지할 수 있음

생성하기 (재정의)

1. 코드에서 우클릭 > 생성자 또는 메서드 재정의

2. 정의할 멤버 선택

예제 코드

'use client'
import React, { Component } from "react";

interface LifecycleExampleProps {
    initialValue?: number;
}

interface LifecycleExampleState {
    count: number;
    syncedProp: number;
}

class LifecycleExample extends Component<LifecycleExampleProps, LifecycleExampleState> {
    private interval?: NodeJS.Timeout; // 타이머를 저장할 변수

    constructor(props: LifecycleExampleProps) {
        super(props);
        this.state = {
            count: 0,
            syncedProp: props.initialValue || 0, // 초기 상태 정의
        };
        console.log("Constructor: 컴포넌트가 생성되었습니다.");
    }

    static getDerivedStateFromProps(nextProps: LifecycleExampleProps, prevState: LifecycleExampleState) {
        console.log("getDerivedStateFromProps: props로부터 state를 동기화합니다.");
        if (nextProps.initialValue !== undefined && nextProps.initialValue !== prevState.syncedProp) {
            return {
                syncedProp: nextProps.initialValue,
            };
        }
        return null; // 변경 사항이 없을 때
    }

    componentDidMount() {
        console.log("componentDidMount: 컴포넌트가 마운트되었습니다.");
        this.interval = setInterval(() => {
            console.log("타이머 실행 중...");
            this.setState((prevState) => ({ count: prevState.count + 1 }));
        }, 10000);
    }

    shouldComponentUpdate(nextProps: Readonly<LifecycleExampleProps>, nextState: Readonly<LifecycleExampleState>): boolean {
        console.log("shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다.");
        if (nextState.count >= 10) {
            console.log("업데이트 중단: count가 10 이상입니다.");
            return false;
        }
        return true;
    }

    getSnapshotBeforeUpdate(prevProps: Readonly<LifecycleExampleProps>, prevState: Readonly<LifecycleExampleState>) {
        console.log("getSnapshotBeforeUpdate: 업데이트 전 DOM 상태를 캡처합니다.");
        return prevState.count; // 이전 count 값을 반환
    }

    componentDidUpdate(prevProps: Readonly<LifecycleExampleProps>, prevState: Readonly<LifecycleExampleState>, snapshot?: number) {
        console.log("componentDidUpdate: 컴포넌트가 업데이트되었습니다.");
        console.log("이전 count:", snapshot);
    }

    componentWillUnmount() {
        console.log("componentWillUnmount: 컴포넌트가 언마운트됩니다.");
        if (this.interval) {
            clearInterval(this.interval); // 타이머 정리
        }
    }

    render() {
        console.log("render: 컴포넌트를 렌더링합니다.");
        return (
            <div>
                <h1>React Class Component Lifecycle</h1>
                <p>Count: {this.state.count}</p>
                <p>Synced Prop: {this.state.syncedProp}</p>
                <button onClick={() => this.setState({ count: 0 })}>
                    Reset Count
                </button>
            </div>
        );
    }
}

export default LifecycleExample;

결과 콘솔 Constructor: 컴포넌트가 생성되었습니다. CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:70 render: 컴포넌트를 렌더링합니다. CustomClassComponent.tsx:36 componentDidMount: 컴포넌트가 마운트되었습니다. CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:70 render: 컴포넌트를 렌더링합니다. CustomClassComponent.tsx:53 getSnapshotBeforeUpdate: 업데이트 전 DOM 상태를 캡처합니다. CustomClassComponent.tsx:58 componentDidUpdate: 컴포넌트가 업데이트되었습니다. CustomClassComponent.tsx:59 이전 count: 0 CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:70 render: 컴포넌트를 렌더링합니다. CustomClassComponent.tsx:53 getSnapshotBeforeUpdate: 업데이트 전 DOM 상태를 캡처합니다. CustomClassComponent.tsx:58 componentDidUpdate: 컴포넌트가 업데이트되었습니다. CustomClassComponent.tsx:59 이전 count: 1 CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:70 render: 컴포넌트를 렌더링합니다. CustomClassComponent.tsx:53 getSnapshotBeforeUpdate: 업데이트 전 DOM 상태를 캡처합니다. CustomClassComponent.tsx:58 componentDidUpdate: 컴포넌트가 업데이트되었습니다. CustomClassComponent.tsx:59 이전 count: 2 CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:70 render: 컴포넌트를 렌더링합니다. CustomClassComponent.tsx:53 getSnapshotBeforeUpdate: 업데이트 전 DOM 상태를 캡처합니다. CustomClassComponent.tsx:58 componentDidUpdate: 컴포넌트가 업데이트되었습니다. CustomClassComponent.tsx:59 이전 count: 3 CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:46 업데이트 중단: count가 5 이상입니다. CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:46 업데이트 중단: count가 5 이상입니다. CustomClassComponent.tsx:38 타이머 실행 중... CustomClassComponent.tsx:26 getDerivedStateFromProps: props로부터 state를 동기화합니다. CustomClassComponent.tsx:44 shouldComponentUpdate: 컴포넌트 업데이트 여부를 결정합니다. CustomClassComponent.tsx:46 업데이트 중단: count가 5 이상입니다. ... 반복하다가 페이지 이탈시 componentWillUnmount에 의해 setInterval 중지됨

주의할 점 (안티패턴)

종종 브라우저 렌더링과 리액트의 리렌더링의 내용을 정확히 이해하지 못하고 사용하다보면 불필요한 리렌더링 작업이 발생할 수 있고, 서비스가 커지면 큰 성능이슈가 발생할 수 있으니 아래 내용은 주의해야한다.

1. componentDidUpdate에서 DOM을 강제로 조작

• Virtual DOM을 통해 UI를 관리한다. 직접 DOM을 조작하면 React의 상태와 실제 DOM이 불일치하게 될 수 있어 예기치 않은 동작을 초래한다.

  componentDidUpdate() {
   // React의 상태 관리와 무관하게 DOM을 강제로 조작
   const element = document.getElementById('custom-text');
   if (element) {
     element.textContent = 'This is directly manipulated!';
   }
  }

2. componentDidUpdate에서 상태를 무조건 업데이트

• 상태를 무조건 업데이트하면 무한 루프가 발생할 수 있다.

  // 잘못된 예
  componentDidUpdate() {
  this.setState({ count: this.state.count + 1 });
  }
  

// 옳은 예 componentDidUpdate(prevProps, prevState) { if (prevProps.someValue !== this.props.someValue) { this.setState({ updated: true }); } }

#### 3. componentWillUnmount에서 비동기 작업의 상태 업데이트
- 컴포넌트가 언마운트된 후 상태를 업데이트하려 하면 메모리 누수와 경고 메시지가 발생
```javascript
componentWillUnmount() {
  fetch('/api/data').then(() => {
    this.setState({ data: 'new data' });
  });
}

4. render 메서드에서 부작용 실행

• render는 순수 함수처럼 동작해야 하며, 부작용(예: 네트워크 요청, 이벤트 등록 등)을 실행하면 React의 동작이 예측 불가능해질 수 있음
• componentDidMount 에서 대신 처리해야함

5. shouldComponentUpdate 에서 무거운 연산 수행

• 이 메서드는 렌더링 여부를 빠르게 판단하기 위한 용도로 사용됩니다. 여기에 시간이 많이 소요되는 작업을 넣으면 성능이 저하된다.

6. 라이프사이클 메서드에서 이벤트 리스너를 등록하고 해제하지 않음

• 리스너를 등록만 하고 해제하지 않으면 메모리 누수와 중복 등록 문제가 발생함
• 쌍으로 관리해야함

7. React의 상태 관리 메커니즘을 무시하고 외부 상태를 직접 변경

• 상태 관리는 항상 React의 setState 또는 useState를 사용하여 수행해야함

자세한 설명은 아래 링크를 참조하자 https://ko.legacy.reactjs.org/docs/react-component.html

개발자로서 Map을 활용한 렌더링 기법은 정말 자주 사용하는 기술이다. 사용법은 그리 어렵지 않으나, 주의해야할 점이 있고 이것에 대해서 자세히 알아보자!

Javascript Map

배열의 요소를 순차적으로 돌며 콜백함수를 실행후 새로운 배열을 생성하는 자바스크립트 내장 함수이다. 함수 인자로는 콜백함수를 받는다.

사용예시

// html에서
 <ul>
    list.map((element, index) => {
        return <li>{element}</li>
    })
  </ul>

// script에서
const newArray => list.map((item) => item + 1); 

주의사항

참조형 타입 불변성 유지

리액트에서 JSX 를 다룰때를 제외하고도 스크립트 내에서 배열 데이터를 변경할 때도 Map, forEach 와 같은 내장함수를 많이 사용한다.

그 이유는 리액트에서는 state의 불변성을 유지하여 데이터 변화를 감지하기 때문이다.

자바스크립트에서 배열이나, 객체 타입은 모두 object 타입이다. object 타입은 모두 참조형 데이터 타입이기 때문에 메모리 상 주소값을 참조하고 있다.

따라서 원본 배열이나 원본 객체를 바꾸는 로직들은 리액트의 감지 대상이 되지 못한다. (리액트를 처음 접한 사람은 왜 push 를 쓰면 안되는지 이해를 못하는 이유 ㅠㅠ)

리액트의 감지 대상이 되려면, 원시형 데이터의 경우는 값을 그대로 바꾸면됨 참조형 데이터의 경우는 새로운 메모리주소를 할당해주는게 포인트다.

새로운 메모리주소를 할당하는, 즉 데이터를 복사하는 방법에는 아래 방법들이 있다.

// spread
const copyList = [...originList]
const copyObject = {...originObject}

// javascript 함수 사용 1. 합치기
const copyList = [].concat(originList);
const copyObject = Object.assign({}, originObject)

// javascript 함수 사용 2. map
const copyList = originList.map(item => item);

Key 의 사용법

리액트에서 Map을 사용하여 JSX를 그릴때 단순히 렌더링만 한다면 콘솔창에 이러한 경고가 나타날 것이다.

반복문 또는 이터레이터 안에 각 자식요소들은 유니크한 키를 가져야한다라고 설명하고 있다.

사실 Warning 이기 때문에 애플리케이션이 먹통이 되거나 멈추는 일은 없다.

하지만 리액트를 쓰는 개발자라면 꼭! key를 추가해야한다.

Key의 역할

리액트에서는 가상돔을 활용하여 이전 상태와 새로운 상태를 비교하여 필요한 부분의 변화만 리렌더링을 실행하고, 나머지 요소들은 이전값을 사용한다.

배열이 추가되거나, 삭제되거나, 순서 변경하거나, 값이 변화할때 key는 React가 각 요소를 고유하게 식별하도록 식별자 역할을 한다. 만약 key가 없다면 리액트는 리스트의 모든 요소를 다시 리렌더링 시킨다. (= 불필요한 리렌더링 방지)

key가 되는 값들

• 1순위: unique Id 값

  const users = [
  {id: 1, name: 'gabi'},
  {id: 2, name: 'kate'},
  {id: 3, name: 'sandy'}
  ]
  
  <ul>
    users.map((user) => {
        return <li key={user.id}>{user.name}</li>
    })
  </ul>

• 2순위: index 값

만약 ID값이 없다면 map내의 index 값을 활용해도 된다. 다만 주의할 점이 있다!

만약 순서가 변경될 수 있는 여지가 있는 배열의 값이라면 index로 key값을 부여했을때 컴포넌트의 상태가 예상치 못하게 초기화되거나, 의도하지 않은 결과가 나올 수 있다.

index로 key를 생성하는 일은 되도록 지양해야하지만 변화하지 않은 단순 readonly성 리스트에서는 사용해도 괜찮다.

const items = ['A', 'B', 'C'];

items.map((item, index) => <input key={index} defaultValue={item} />);

만약 배열이 [C, A, B]로 변경되면, C에 입력된 값이 유지되지 않을 수 있다.

• key로 불가능한 값: 변화하는 값

좋아하는 UI형태는 아닌데 현업에서 이런식으로 테이블안에 input 형태가 들어가는 경우가 꽤 많다... 이럴때 키 값을 변화할 수 있는 Name 값으로 주게된다면 입력할때마다 UI 가 뚝뚝 끊기는 것처럼 보이는 이상한 화면이 만들어지게 된다.

왜그럴까? 리액트는 key를 식별자로 리렌더링을 위한 상태 비교가 이루어진다고 했다. 근데 사용자가 Name을 입력할때마다 바뀐 값으로 key값이 새롭게 업데이트가되고 그와 동시에 리액트에서는 기존에 없는 key이기 때문에 해당 새로운 배열 요소라고 인지하여 새롭게 생성하고 렌더링 시키는 것이다.

따라서 변화하는 값으로 key를 부여하면 절대로 안된다.

리액트를 개발하다 보면 종종 DOM에 직접 접근해야하는 경우가 발생한다. 이런 경우에 사용하는 Ref에 대해서 알아보자!

1. Ref 란?

리액트에서 ref는 DOM요소나 리액트 컴포넌트를 직접적으로 참조하기 위해 사용하는 속성이다. DOM의 속성과 내장 함수를 직접 사용하기위해 사용된다.

2. Ref 특징

(1) current 속성

• 리액트 내 Ref를 사용하여 DOM 에 접근하기 위해 current 속성을 사용한다.
• 초기값은 null이며, 컴포넌트가 마운트 된 후에 값이 설정된다.

(2) 렌더링 간 유지

• 상태값, Props 와 달리 렌더링 간 값이 유지되며, ref 값이 변경되어도 리렌더링 되지 않는다.

3. Ref 생성하기

클래스 컴포넌트

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus(); 
  };

  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

함수형 컴포넌트

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

4. 사용 시 주의사항

(1) 최소한으로 사용

• 리액트의 선언적 프로그래밍 원칙에 어긋날 수 있으므로 꼭 필요한 경우에만 사용한다.

  (2) 읽기 전용으로 사용

• Ref를 직접 수정하는 방식은 데이터흐름 파악이 어려울 수있다.
• 데이터는 State, 또는 Props를 사용할 것을 권장

5. Ref 적절한 사용 사례

(1) 포커스 관리

사용자 경험 개선을 위해 포커스를 설정하거나 초기화

const AutoFocusInput = () => {
  const inputRef = useRef(null);

// 컴포넌트 마운트 시 자동 포커스
  useEffect(() => {
    inputRef.current.focus(); 
  }, []);

  return <input ref={inputRef} type="text" placeholder="Auto-focused Input" />;
};

(2) 스크롤 제어

특정 요소로 스크롤을 이동하거나, 스크롤 위치를 측정 및 조작할 때

const ScrollExample = () => {
  const scrollRef = useRef(null);

  const scrollToBottom = () => {
    scrollRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToBottom}>Scroll to Bottom</button>
      <div ref={scrollRef} style={{ height: '100px', background: 'blue' }}></div>
    </div>
  );
};

(3) 파일 입력 요소 접근

파일 업로드 기능 구현 시 ref로 파일 선택창을 트리거

const FileInput = () => {
  const fileInputRef = useRef(null);

  const handleClick = () => {
    fileInputRef.current.click(); // 파일 선택창 열기
  };

  return (
    <div>
      <input ref={fileInputRef} type="file" style={{ display: 'none' }} />
      <button onClick={handleClick}>Upload File</button>
    </div>
  );
};

(4) 저장된 값 유지 (Mutable Object)

렌더링 간 값을 저장하고 유지해야 하지만, 상태를 변경하여 리렌더링할 필요가 없을 때

const Timer = () => {
  const countRef = useRef(0);

  useEffect(() => {
    const interval = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current); // 렌더링 없이 값 증가
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Check Console for Timer</div>;
};

(5) 애니메이션 또는 외부 라이브러리 사용할때

외부 라이브러리(e.g., D3.js, Chart.js, Leaflet.js 등)와 React를 통합할 때 ref를 사용해 DOM 요소를 조작

import { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

const ChartExample = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    new Chart(canvasRef.current, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: 'Colors',
          data: [12, 19, 3],
        }],
      },
    });
  }, []);

  return <canvas ref={canvasRef}></canvas>;
};

(6) React 컴포넌트 참조

추후 hooks에서 자세히...

웹브라우저에서 이벤트 요소는 유저와의 상호작용에서 뺄래야 뺼 수 없는 중요한 요소이다. 정말 정말 자주 사용하는 마우스, 키보드 이벤트 외에도 다양한 이벤트가 있고 적재 적소에 활용한다면 좋은 UI/UX 를 만들 수 있을것이다. 😎

이벤트란? 유저가 웹 브라우저에서 DOM 요소와 상호작용 하는 모든것을 말한다.

리액트의 이벤트

1. React.SyntheticEvent

자바스크립트 네이티브 이벤트(Event) 객체를 감싸는 리액트 객체이다. 네이티브 이벤트 인터페이스가 같으므로 순수 자바스크립트에서 HTML 이벤트를 다룰 때와 똑같이 사용한다.

2. 사용 시 주의사항

• HTML 이벤트 속성명과 달리 카멜케이스를 사용한다 (onclick -> onClick)
• 이벤트 속성 내 값은 함수 형태의 값을 넣는다.
• DOM 요소에만 이벤트를 설정 할 수 있다.

3. 예제 코드

클래스형 컴포넌트

// 1번 생성자에 의해
class ClickButton extends Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }

  function handleClick()  {
    console.log('Button clicked!');
    alert('Button clicked!');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me!</button>
      </div>
    );
  }
}

export default ClickButton;

// 화살표 함수를 이용
class ClickButton extends Component {
   handleClick = () => {
    console.log('Button clicked!');
    alert('Button clicked!');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me!</button>
      </div>
    );
  }
}

export default ClickButton;

• 1번 생성자를 이용한 함수 생성에 bind 해줘야 하는 이유 일반 함수(function() {...})에서 this는 함수를 호출하는 방법에 따라 결정되는 객체를 참조한다. 즉, this는 현재 실행 중(런타임)인 코드의 실행 컨텍스트에 따라 값이 결정된다.
• 2번 화살표 함수(() => {...})는 작성된 위치의 스코프(렉시컬 스코프)에서 this를 상속받아 사용한다.

• 렉시컬 스코프(Lexical Scope)란? 코드를 작성한 위치(문법적 구조)에 따라 변수의 유효 범위를 결정하는 방식이다. 대부분의 현대 프로그래밍 언어는 렉시컬 스코핑을 사용한다. 즉, 어디서 호출되었는지가 아니라, 어디서 정의되었는지에 따라 스코프가 결정된다.

• 다이나믹 스코프(Dynamic Scope)란? 다이나믹 스코프는 함수가 호출된 시점의 실행 컨텍스트를 기반으로 스코프를 결정하는 방식이다. 즉 런타임에 따라 변수 참조가 달라질 수 있다.

함수형 컴포넌트

const ClickButton = () => {
  // 함수형 형태
  const handleClick = () => {
    console.log('Button clicked!');
    alert('Button clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me!</button>
    </div>
  );
};

3. 종류

Clipboard Events

1. 기본적으로 텍스트나 콘텐츠를 복사, 잘라내기, 붙여넣기 작업과 관련된 이벤트
2. 주로 사용되는 요소는 <input>, <textarea>
3. 이벤트 종류

• onCopy 사용자가 복사(Copy) 동작을 수행할 때 발생하는 이벤트
• onCut 사용자가 잘라내기(Cut) 동작을 수행할 때 발생하는 이벤트
• onPaste 사용자가 붙여넣기(Paste) 동작을 수행할 때 발생하는 이벤트

  Composition Events

1. IME(입력기)를 사용하는 언어(예: 한글, 일본어, 중국어 등)에서 입력 조합 상태를 추적할 수 있도록 설계된 이벤트
2. 주로 사용되는 요소는 <input>, <textarea>
3. 이벤트 종류

• onCompositionStart 입력 조합이 시작될 때 발생 (예: ㅎ)
• onCompositionUpdate 입력 조합이 진행 중일 때 발생 (예: 하)
• onCompositionEnd 입력 조합이 완료될 때 발생 (예: 한)

  Keyboard Events

1. 사용자가 키보드로 입력을 수행할 때 발생하는 이벤트
2. 주로 사용되는 요소는 <input>, <textarea>
3. 이벤트 종류

• onKeyDown 키가 눌릴 때 발생하는 이벤트
• onKeyPress 키 입력 시 발생하는 이벤트 (Deprecated, onKeyDown 사용 권장)
• onKeyUp 키를 뗄 때 발생하는 이벤트

4. 예제

   //  키 조합 동작 구현 (Ctrl + S)
   function App() {
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault(); // 기본 동작 방지
      alert('Ctrl + S 키가 눌렸습니다!');
    }
   };
   
   return (
    <div
      tabIndex={0}
      onKeyDown={handleKeyDown}>
      Ctrl+S를 눌러보세요
    </div>
   );
   }
   

#### Focus Events
1. 사용자가 요소에 포커스를 맞추거나 벗어날 때 발생하는 이벤트 
2. 주로 사용되는 요소는 `<input>`, `<textarea>`, `<select>`, `<button>` 
3. 이벤트 종류
- `onFocus` 요소에서 포커스가 맞춰질 때 발생하는 이벤트
- `onBlur` 요소에서 포커스가 벗어날 때 발생하는 이벤트
#### Form Events
1. 폼 요소에서 발생하는 다양한 상호작용 이벤트, 주로 입력 처리, 폼 제출, 유효성 검사 등의 작업
2. 주로 사용되는 요소는 `<form>`, `<input>`, `<textarea>`, `<select>` 
3. 이벤트 종류
- `onChange` 폼 요소가 입력 또는 선택에 의해 값이 변경될때 발생하는 이벤트
- `onInput` 사용자가 입력하는 즉시 발생
- `onInvalid` HTML5 폼 검증에서 유효성 검사 실패 시 발생
- `onReset` 폼이 리셋될 때 발생
- `onSubmit` 폼이 제출될 때 발생
> `onInvalid`는 HTML5 유효성 검사 속성과 함께 작동한다. 
required: 필수 입력
min, max: 숫자 범위 제한.
minLength, maxLength: 문자열 길이 제한.
pattern: 정규식을 사용한 입력 형식 제한.
#### Image Events
1. 이미지를 포함한 리소스가 로드되거나 로드 중 에러가 발생했을 때 트리거되는 이벤트
2. 주로 사용되는 요소는 `<img>`, `<script>`, `<link>`
3. 이벤트 종류
- `onError` 이미지나 스크립트, 비디오 등에서 리소스를 찾지 못하거나 로드하지 못할 경우 발생하는 이벤트
- `onLoad` 이미지, 스크립트, 스타일 등에서 리소스가 완전히 로드된 경우 발생하는 이벤트
#### Mouse Events
1. 사용자가 마우스와 상호작용할 때 발생하는 이벤트이다. 클릭, 드래그, 이동 등 다양한 동작을 처리
2. 주로 사용되는 요소는 `<button>`, `<div>`, `<span>`, `<a>`
3. 이벤트 종류
- `onClick` 마우스 버튼을 클릭할 때 발생
- `onContextMenu` 마우스 우클릭(컨텍스트 메뉴 열기) 시 발생
- `onDoubleClick` 마우스를 두 번 클릭할 때 발생
- `onDrag` 드래그가 시작될 때부터 진행 중일 때까지 발생
- `onDragStart` 드래그가 시작될 때 발생
- `onDragEnd` 드래그가 끝났을 때 발생
- `onDragEnter` 드래그 중 요소에 들어왔을 때 발생
- `onDragLeave` 드래그 중 요소에서 벗어났을 때 발생
- `onDragOver`  드래그 중인 요소가 다른 요소 위에 있을 때 발생
- `onDrop` 드래그 중인 요소가 다른 요소 위에 드롭될 때 발생
- `onMouseDown` 마우스 버튼을 누를 때 발생
- `onMouseEnter` 마우스가 요소에 들어올 때 발생
- `onMouseLeave` 마우스가 요소에 벗어날 때 발생
- `onMouseMove` 마우스가 요소 안에서 이동할 때마다 발생
- `onMouseOut` 마우스가 요소 바깥으로 이동할 때 발생
- `onMouseOver` 마우스가 요소 위로 올라갈 때 발생. (하위 요소 포함, onMouseEnter와 다르게, 자식 요소에 진입해도 이벤트 발생)
- `onMouseUp` 마우스 버튼을 눌렀다가 뗄 때 발생
#### Touch Events
- `onTouchCancel` 터치 이벤트가 시스템에 의해 취소될 때 발생 (예, 전화수신, 다른 앱 활성화)
- `onTouchEnd` 사용자가 화면에서 손가락을 뗄 때 발생
- `onTouchMove` 사용자가 터치한 손가락을 움직일 때 발생
-`onTouchStart` 사용자가 화면을 터치하기 시작할 때 발생
#### Pointer Events
1. 마우스, 터치 스크린, 스타일러스 펜 등 다양한 입력 장치를 일관되게 처리할 수 있도록 설계된 이벤트, 기존 `Mouse Events`와 `Touch Events`를 통합한 이벤트 시스템으로, 모든 입력 장치를 포괄적으로 다룰 수 있음
2. 모든 DOM 요소에서 사용 가능
3. 이벤트 종류
- `onPointerDown` 포인터(마우스, 터치 등)가 요소를 누를 때 발생
- `onPointerMove` 포인터가 요소 위에서 이동할 때 발생
- `onPointerUp` 포인터가 눌린 상태에서 뗄 때 발생
- `onPointerCancel` 포인터 동작이 시스템에 의해 취소될 때 발생 (예: 터치 이벤트 중 다른 앱 실행)
- `onGotPointerCapture` 요소가 포인터 캡처(즉, 모든 포인터 이벤트를 해당 요소로 전달)를 획득할 때 발생
- `onLostPointerCapture` 요소가 포인터 캡처를 잃을 때 발생
- `onPointerEnter` 포인터가 요소에 들어올 때 발생 (버블링되지 않음
- `onPointerLeave` 포인터가 요소를 벗어날 때 발생 (버블링되지 않음)
- `onPointerOver` 포인터가 요소 위로 올라갈 때 발생 (하위 요소 포함)
- `onPointerOut` 포인터가 요소 바깥으로 이동할 때 발생 (하위 요소 포함)
4. 터치 장치 또는 스타일러스 펜을 다루는 UI에 유용, 다양한 입력 장치를 지원하는 애플리케이션에 유용
#### Selection Events
1. 사용자가 텍스트를 드래그를 통해, 또는 더블클릭으로 선택했을 때 발생하는 이벤트
2. 주로 사용되는 요소는 `<input>`, `<textarea>`
3. 이벤트 종류
- `onSelect`  사용자가 텍스트를 선택했을 때 발생하는 이벤트 (마우스로 드래그하거나 키보드로 텍스트를 선택할 때 발생함)
#### UI Events
- `onScroll` 사용자가 스크롤 동작을 수행할 때 발생하는 이벤트
#### Wheel Events
- `onWheel` 이벤트는 사용자가 마우스 휠을 스크롤하거나 터치패드로 스크롤 동작을 수행할 때 발생.
#### Animation Events
- `onAnimationStart` CSS 애니메이션이 시작될 때 발생
- `onAnimationEnd` CSS 애니메이션이 종료될 때 발생
- `onAnimationIteration` CSS 애니메이션이 한 번 반복될 때마다 발생
#### Transition Events
- `onTransitionEnd` CSS 트랜지션이 끝났을 때 발생
#### Other Events
- `onToggle` onToggle 이벤트는 HTML5 `details` 요소가 열리거나 닫힐 때 발생


> _자세한 사항은 아래 링크를 통해 확인가능하다. _
[SyntheticEvent 공식문서 링크](https://legacy.reactjs.org/docs/events.html)

---
## 이벤트 흐름
### 1. 이벤트 버블링(Event Bubbling)
- 개념: 이벤트가 발생한 요소에서 **부모 요소로 전파되는 과정**이다.
- 특징: 기본동작이며, 대부분 이벤트 `onClick`, `onChange` 등에서 적용된다.
```javascript
function App() {
  const handleDivClick = () => {
    console.log('부모 <div> 클릭');
  };

  const handleButtonClick = () => {
    console.log('자식 <button> 클릭');
  };

  return (
    <div onClick={handleDivClick}>
      <button onClick={handleButtonClick}>클릭</button>
    </div>
  );
}

Console 결과

자식 <button> 클릭
부모 <div> 클릭

2. 이벤트 캡쳐링(Event Capturing)

• 개념: 이벤트가 발생한 요소까지 부모 요소에서 자식 요소로 내려오며 전파되는 과정이다.

• 특징: 기본적으로 React의 SyntheticEvent는 버블링 이벤트를 처리한다. 캡처 단계에서 처리하려면 onClickCapture와 같은 Capture 이벤트를 사용해야 함

  function App() {
  const handleDivClick = () => {
    console.log('부모 <div> 클릭 (캡처)');
  };
  
  const handleButtonClick = () => {
    console.log('자식 <button> 클릭');
  };
  
  return (
    <div onClickCapture={handleDivClick}>
      <button onClick={handleButtonClick}>클릭</button>
    </div>
  );
  }

• Console 결과*

  부모 <div> 클릭 (캡처)
  자식 <button> 클릭

3. 이벤트 중단

1. stopPropagation 이벤트가 부모로 전파되지 않도록 중단

   function App() {
   const handleDivClick = () => {
    console.log('부모 <div> 클릭');
   };
   
   const handleButtonClick = (event: React.MouseEvent) => {
    event.stopPropagation(); // 부모로 전파 중단
    console.log('자식 <button> 클릭');
   };
   
   return (
    <div onClick={handleDivClick}>
      <button onClick={handleButtonClick}>클릭</button>
    </div>
   );
   }

Console 결과

자식 <button> 클릭

2. preventDefault 커스텀 동작을 정의하거나 기본 동작을 비활성화 하기위한 기본 동작(예: 링크 이동, 폼 제출)을 막기 위해 사용

   function App() {
   const handleLinkClick = (event: React.MouseEvent) => {
    event.preventDefault(); // 링크 이동 막기
    console.log('커스텀 동작 실행');
   };
   
   return <a href="https://example.com" onClick={handleLinkClick}>링크</a>;
   }

프론트엔드 개발자는 서비스의 특성에 따라 요구되는 렌더링을 잘 이해하고 구현할 수 있어야한다.

렌더링

1. 개념

화면에 표시할 웹 페이지를 만드는 과정을 의미

2. 렌더링 과정

1) 로더가 서버로 부터 HTML을 불러옴 2) HTML을 파싱하여 DOM Tree 생성 3) CSS 파일과, 스타일 요소를 분류하여 CSSOM 트리를 생성 4) DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 생성 5) 렌더링 트리의 요소들의 크기와 위치를 계산 6) 계산된 크기와 위치에 맞게 화면에 출력

이러한 렌더링 과정중 Client와 Server 중 어느쪽에서 렌더링이 준비되느냐에 따라 CSR과 SSR로 나뉘게 된다.

Client Side Rendering (CSR)

1. CSR이란?

말 그대로 클라이언트 측에서 렌더링을 담당하는 기법이다.

2. 동작과정

(1) 사용자가 웹사이트에 방문하면 브라우저는 서버에 콘텐츠 (정적파일)을 요청한다. (2) 서버는 script, meta, link 등 태그가 포함된 최소한의 HTML과 연결된 JS 번들을 반환한다. (3) 브라우저는 반환받은 JS 파일을 다운로드하고 실행하면서 필요한 데이터를 API 서버에 요청한다. (4) API에서 데이터를 받아와 자바스크립트를 활용하여 동적인 페이지(DOM)을 생성한다. (5) 사용자가 다른 페이지를 방문하면, 서버에 HTML을 요청하지 않고, 이미 받은 자바스크립트를 이용해 렌더링 한다.

(1) localhost 호출 후 최소한의 HTML 반환 (2) 서버에서 받은 font, CSS파일과 JS파일, 이미지를 다운로드 (3) API를 통해 데이터를 받아와 동적으로 렌더링

3. 장단점

장점

• 빠른 사용자 경험 한번 로드되면 페이지 간 이동이 빠름, 새로고침 없이 SPA 처럼 동작
• 유연한 UI에 최적화 자바스크립트를 사용하여 복잡한 인터랙션과 UI를 구현하기 적합하다.
• 서버 부하 감소 초기 요청에 HTML만 전달하고 이후부터는 클라이언트에서 요청하여 렌더링하기때문에 서버 부담이 적다.
• SPA에 적합 CSR은 SPA 구조에 잘 맞다. 필수는 아님(React, Vue, Angular 등)

  단점

• SEO 문제 콘텐츠가 브라우저에서 생성되므로, 검색 엔진이 콘텐츠를 크롤링하기 어렵다. 이를 해결하기 위해 SSR 이나 Hydration 같은 기술을 추가로 사용한다.
• 초기 로딩 시간 초기 렌저링 시 자바스크립트 번들을 다운로드 하고 실행해야 하므로, 첫 화면 표시까지 시간이 다소 걸린다.
• JS 의존성 브라우저가 자바스크립트를 비활성화하면 페이지 동작이 제한됨

관련된 주요 기술

• React, Vue, Angular CSR을 주로 사용하는 프레임워크들, DOM을 동적으로 관리함
• Next.js, Nuxt.js React와 Vue 기반의 프레임워크로 근래에는 CSR, SSR 모두 혼합하여 사용가능하다
• Webpack, Vite 자바스크립트 번들링과 빌드 툴로 CSR 환경에서 필수적임

CSR 최적화 전략

• 코드 스플리팅(Code Splitting) 페이지별로 자바스크립트 번들을 나눠서 필요한 부분만 로드
• Lazy Loading 필요할 때만 컴포넌트를 로드하여 초기 로딩 시간을 단축
• Hydration 서버에서 렌더링된 HTML을 브라우저에서 자바스크립트로 보강하여 동적인 상태로 전환
• 캐싱 자바스크립트와 데이터를 브라우저 캐시에 저장하여 재방문시 빠르게 로딩
• Preloading 사용자가 필요로 할 데이터를 미리 가져와 로딩 시간을 줄임

Server Side Rendering (SSR)

1. SSR이란?

말 그대로 서버 측에서 렌더링을 담당하는 기법이다.

2. 동작과정

1. 사용자가 웹사이트에 방문하면 브라우저는 서버에 콘텐츠를 요청한다.
2. 서버는 페이지에 필요한 모든 데이터 및 css까지 적용해서 렌더링 준비를 마친 HTML과 자바스크립트 코드를 브라우저에 반환한다.
3. 완전한 HTML을 클라이언트로 전달한다.
4. 브라우저는 HTML을 즉시 렌더링하여 사용자에게 보여준다.
5. 브라우저는 HTML을 렌더링한 후 자바스크립트를 다운로드하고 실행한다. 실행된 자바스크립트는 HTML과 연결되어 페이지를 동적인 SPA로 전환한다. (Hydration)

(1) localhost를 호출하여 데이터를 서버에서 페치하여 렌더링 가능한 상태로 HTML을 반환함 (2) 브라우저는 즉시 HTML을 그림 (3) 이후에 JS 파일을 다운로드 받아 동적인 상태로 바꿈 (하이드레이션)

3. 장단점

장점

• SEO 친화적 서버에서 완전한 HTML을 제공하므로 검색 엔진이 콘텐츠를 쉽게 크롤링할 수 있음 (SEO에 필수적인 페이지는 SSR로 개발해야함!!)
• 빠른 초기 렌더링 브라우저가 자바스크립트를 실행하기 전에 HTML을 렌더링하여 사용자에게 빠른 첫 화면을 제공함
• 동적 데이터 포함 서버 내부에서 데이터를 fetch하여 반영하기 때문에 최신 데이터를 반영한 HTML 생성가능

  단점

• 서버 부하 증가 서버가 매 요청마다 HTML을 생성해야 하므로 부하가 증가.
• 느린 응답 시간 데이터 처리 및 HTML 생성으로 초기 응답 시간이 길어질 수 있음.
• 복잡성 증가 클라이언트와 서버에서 모두 렌더링 로직을 관리해야 함.

자바스크립트 엔진의 대한 이해로 SSE를 활용하여 브라우저 알림 서비스를 개발한 내용을 작성해보겠다!

우선 SSE란 뭘까? 쉽게 말하면 TCP 기반의 HTTP 프로토콜을 사용하여 Streaming API 통신을 통해 일정 시간동안 서버와의 연결을 유지하여 실시간으로 서버에서 응답을 받을 수 있는 방법이다. 자주 사용하는 Rest API 통신과는 다른 점이 있다.

Rest API 통신 방법

• 사용자 이벤트에 의해 클라이언트는 데이터를 비동기 요청으로 호출함 (Request)
• 요청을 받은 서버는 그에 대한 대답을 브라우저로 응답함 (Response)
• 요청과 응답은 서버에서 설정한 시간내에 이루어져야하며 그 이상의 응답을 받지 못하면 Timeout 처리로 통신 실패 처리함
• 클라이언트(브라우저)는 항상 API를 통해 데이터를 요청하는 입장, 서버는 항상 브라우저의 요청을 수신받아 응답하는 입장이다. (역으로 불가능)

Sreaming API 통신 방법

• 클라이언트는 서버에 연결을 요청함 (TCP handshake)
• 연결에 성공하면 서버와 지속적인 연결을 유지시킴
• 서버는 이벤트를 발생시켜 텍스트 형식의 데이터 조각(chunk)를 클라이언트로 푸시함
• 클라이언트는 Web API의 내장 window의 addEventListener 를 사용하여 서버에서 오는 데이터를 실시간으로 처리함. (비동기처리)
• 서비스 규칙에 따라 설정된 시간내에 이벤트를 받지 못하거나, 클라이언트 또는 서버에서 연결을 종료시킬 수 있음

클라이언트가 먼저 종료할 경우?

• 클라이언트는 SSE 연결을 종료하기 위해 EventSource.close() 메서드를 호출한다.
• 이로 인해 클라이언트는 현재 TCP 연결을 종료하며, 서버는 연결 종료를 감지한다.
• 서버는 연결 종료를 감지하고 연결을 정리한다.

서버에서 먼저 종료 할 경우?

• 서버가 응답을 종료하거나 close 메세지를 전달함
• 서버가 필요한 로직이 수행되여 더이상 연결이 필요하지 않을때 마지막 메세지 전달 여부를 확인(Ack 응답) 하고 종료시킨다.
• 대부분의 SSE 구현에서는 TCP의 신뢰성에 의존해 메시지를 보낸 뒤 바로 연결을 종료한다.

그럼 본격적으로 리액트, Next에서 SSE 알림서비스를 어떻게 개발했는지 작성해보도록 하겠다.

서비스 요구사항

1. 대용량 파일을 다운로드 요청함
2. 파일 다운로드가 완료되면 서버에서 완료 처리 메세지를 받아 다운로드 링크 url을 유저에게 제공함
3. 다운로드 중에 유저는 프로즌 브라우저가 아닌 웹서비스 내에서 어떤 동작도 가능하도록 해야함 (비동기처리)

개발 시 고려해야 할 사항

1. 여러 페이지 내 공통 서비스 로직으로 공통 모듈로 개발해야함
2. 웹 페이지 내 페이지 이동이 있어도 알림을 정상적으로 수신할 수 있어야함 (=리액트 컴포넌트 라이프사이클과는 별개로 핸들링할 수 있는 객체와 로직이 필요하다)

아래부터는 시도해본 개발 내용들이다...

우선 회사 서비스는 아래와 같은 컴포넌트 구조로 되어있었다. 별로 체크한 곳에서 파일 다운로드 요청이 이루어지고 어디에선가 공통으로 이벤트를 처리할 곳이 필요했다.

방법 1. Top Header에서 이벤트 핸들러 수신하기

공통 모듈로 개발하려다보니 여러가지 방법중 제일 보편적으로 생각했던 방법이다.

브라우저에서 SSE는 EventSource 객체를 생성하여 구현하는데, 해당 객체에 처리가 필요한 리스너를 함께 등록해야한다.

Rest API를 통해 다운로드를 요청하면 알림서버에서 각각 고유한 키로 사용될 uuid가 떨어졌다.

해당 uuid를 통해 알림서버에 연결요청을 한다. 그런데 다운로드 요청은 children 컴포넌트에서 이루어지고 EventSource 처리는 Top Header에서 처리하려고 하다보니 uuid를 Top Header에 전달해줄 매개체가 필요했다.

Vue 개발할때는 이벤트버스 라는게 있었는데, (동료분께서) 리액트에서는 잘 사용하지 않는다고 하시길래 다른방법을 찾아보았으나, Store로 전달하는 방법밖에 떠오르지 않았다.

그런데 한가지 마음에 걸리는게 있었다 ㅠㅠ 공용 Store로 데이터를 전달하고 핸들링하다보면 예기치못한 렌더링이 일어날 수도 있고, 데이터를 직접 할당, 삭제 등등 핸들링이 필요하기때문에 과연 이 방법이 적당한가 고민이 되었다...

방법 2. EventSource Class 객체 생성하기

개발하다 보니, 꼭 Top Header에서만 이벤트를 처리하지 않아도 브라우내 내장 객체인 WebAPI, Task Queue, GC를 잘 활용하면 될것 같다는 생각이 들었다.

// 다운로드 호출부
const fileDownlaodHandler = (uuid: string) => {
    try {
      const eventSource = new NotificationEventSource('API URL');
      eventSource.doProcess(uuid)
    } catch(e) {
      // error 핸들링
    }
}

import { type Event, EventSourcePolyfill } from 'event-source-polyfill'
import { type EventSourcePolyfillInit } from 'event-source-polyfill'
import { toast } from 'react-hot-toast'

export default class NotificationEventSource {
    private _eventSource: EventSourcePolyfill | null = null 
    private url = '서버 요청 url'


      constructor(url: string) {
      this.url = url;
    }

    public doProcess(uuid: string) {
      if(!uuid) {
           throw {message: '잘못된 요청입니다.'}; 
      }

      const fetchUrl = `${this.url}/${uuid}`
      this._eventSource = new EventSourcePolyfill(fetchUrl) 

      this._eventSource.addEventListener('connect', () => {
          // 연결 처리 callback 함수
      }) 

      this._eventSource.addEventListener('error', () => {
          // 에러 처리, Closed 처리 callback 함수
        // ...
        this.close() // 메모리 해제
      }) 

      this._eventSource.addEventListener('completed', () => {
          // 완료 처리 callback 함수
        // .... 

        toast.custom((t) => {
         return <div>알림 완료 토스트입니다!</div>
        }, {
            position: 'bottom-center',
            icon: null,
            duration: 10000,
          })

        this.close() // 메모리 해제
      }) 

    }

  private close() {
    this._eventSource?.close()
    this._eventSource = null
  }
}

처리과정은 아래와 같다.

1) fileDownlaodHandler 호출 2) NotificationEventSource 객체가 메모리힙에 생성 3) 해당 인스턴스의 doProcess 실행 4) connect, error, completed 의 대한 콜백 함수가 메모리 힙에 등록 5) 서버에서 메세지 수신되면 핸들러에 의해 비동기 이벤트 처리 (이벤트 루프에 의해 핸들러 Callback 함수가 콜스택으로 이동하는 과정) 6) 완료처리 혹은 서버 에러 발생시 close 함수를 통해 메모리 해제

6번의 메모리 해제가 명시적으로 있을때까지 EventSource 인스턴스 및 참조객체들은 메모리힙에 계속 살아있는 상태가되기때문에 GC의 대상이 아니게 된다.

그래서 페이지를 이동해도 메모리힙의 객체는 살아있고 이벤트 루프에 의해 WebAPI 에서 Callback 함수를 큐에 대기시켜 토스트를 띄울 수 있는것이다.

추가로 새로고침시 메모리 및 데이터가 전부 초기화 되기때문에 이럴 경우 어떻게 방어할지는 고민해봐야할것 같다...

자바스크립트 엔진에 두번째 파트인 메모리힙에 대해서 알아보자!

구성요소

자바스크립트 엔진에는 크게 두가지의 구성요소를 가지고있다.

먼저 들어가기 앞서 자료구조 Heap에 대해서 간단하게 알아보겠다.

자료구조 힙(heap)이란?

• 완전 이진 트리 기반의 자료구조로, 최대 힙과 최소 힙 중 하나를 만족하는 특성을 갖는다.
• 여러 개의 값들 중에서 최대값이나 최솟값을 빠르게 찾도록 만들어진 자료구조이다.

• 최대 힙 (Max-Heap): 부모 노드의 값이 자식 노드의 값보다 항상 크거나 같음

• 최소 힙 (Min-Heap): 부모 노드의 값이 자식 노드의 값보다 항상 작거나 같음

사용예시

• 우선순위 큐: 작업 스케쥴링
• 힙 정렬: 효율적인 정렬 알고리즘 구현
• 동적 데이터 처리: 최대값이나 최소값 유지에 유리한 데이터 처리 방식

메모리힙

자바스크립트가 실행될때 콜스택이 원시형 데이터를 저장한다면, 메모리 힙은 동적인 데이터인 참조타입의 데이터 (객체, 배열, 함수...) 등이 저장되는 저장소이다.

왜 자료구조인 힙(heap)을 사용하는가?

1. 동적 메모리 할당

• 객체나 배열 등 참조 타입의 크기는 런타임에 결정되므로, 정적인 스택에 올리기 어렵다.
• 힙은 동적으로 크기가 변할 수 있는 데이터를 저장하기 적합하다.

2. 유연한 메모리 관리

• 프로그램 실행 중 필요한 데이터를 동적으로 할당하고 해제할 수 있다.
• 자바스크립트의 가비지 컬렉션(GC)은 힙 영역의 사용되지 않는 메모리를 자동으로 해제하여 메모리 누수를 방지한다.

3. 객체와 참조의 관리

• 객체는 종종 다른 객체를 참조하거나 큰 데이터를 포함한다. 힙은 이러한 구조를 효율적으로 관리할 수 있는 공간을 제공한다.

가비지 컬렉터 (Garbage Collection)

자바스크립트에서 변수나 함수 등 모든것을 만들때 자바스크립트 엔진은 메모리를 할당하고 더 이상 필요하지 않으면 해제한다. 메모리 할당은 메모리 공간을 예약하는 과정이며, 메모리를 해제하면 공간이 확보되어 다른 용도로 사용 할 수 있게 된다.

아래와 같은 순서로 메모리 라이프 사이클은 동작한다.

1. 메모리 할당 자바스크립트는 생성한 객체에 대해 필요한 메모리를 할당한다.
2. 메모리 사용 코드에서 명시적으로 수행되는 작업으로, 메모리를 읽고 쓰는 작업은 곧 변수에서 읽거나 변수에 쓰는 작업을 말한다.
3. 메모리 해제 엔진은 사용한 메모리를 해제하고 새로운 용도로 쓰도록 메모리를 해제한다.

그런데 우리는 메모리를 해제하는 작업을 예외상황이 아니면 별도로 하지 않는다.

예외상황: 클로져 함수를 사용하는 경우에는 명시적으로 null 처리를 함

메모리 해제는 자바스크립트 엔진 내 가비지 컬렉터(이하 GC)가 알아서 해주고 있기 때문에 개발자는 이를 신경쓰지 않아도 됐던 것이다.

GC는 어떤 변수나 함수가 더 이상 필요하지 않다는 것을 파악하면 이것을 차지하고 있던 메모리를 해제한다.

그런데 GC는 어떻게 더이상 쓰지 않은 데이터를 어떻게 수집하여 해제하는 것일까?

1. 기본원칙: Reachablilty (도달 가능성)

• 객체가 메모리에 계속 남아있을 필요가 있는지 판단하는 기준이다.
• 루트에서부터 참조(Chain)에 의해 접근가능한 모든 변수, 호출 스택등을 파악하여 도달 가능성이 절대 없는 객체는 GC의 수집대상이 된다.

2. GC 과정

• Mark (마킹단계): GC는 루트객체부터 시작하여, 모든 도달가능한 객체를 탐색하고 마킹한다.
• Sweep (정리단계): 마킹되지 않은 객체는 도달 불가능한 것으로 판단하고 메모리에서 해제한다.

3. 세대별 가비지 컬렉션

자바스크립트 엔진은 세대별 가비지 컬렉션 전략을 활용하여 성능을 최적화한다. 메모리를 영 객체와 장기 객체로 나누어 관리한다.

• 영 객체: 새롭게 생성된 객체는 영세대로 간주한다. 대부분 객체는 수명이 짧으므로 이 영역에 수집된다. 이 과정을 Minor GC 라고한다.
• 장기 객체: 영세대에서 살아남은 객체는 장기 객체로 취급한다. 장기 객체는 상대적으로 크고 수집 빈도가 낮다. 이 과정을 Major GC 또는 Full GC 라고 하며, 큰 리소스를 소요한다.

메모리 누수와 GC의 한계

메모리 누수란? 쉽게 말해 GC가 정리하지 못한 불필요한 데이터가 힙 영역에서 존재하는것을 말한다.

우리는 메모리 누수가 발생하지 않도록 개발시 주의를 해야한다. 아래와 같은 개발 방식은 로직이 끝난 후 메모리 해제 로직도 함께 꼭 추가되어야 한다.

메모리 해제는 변수에 null을 할당하면 됨

[메모리 누수가 발생하는 대표 상황]

1. 순환참조

function createCircularReference() {
    let objA = {};
    let objB = {};

      objA.ref = objB; // 서로 참조하는 상황
      objB.ref = objA;
    return objA;
}
// 순환참조로 인해 GC가 메모리 해제를 하지않음
let circular = createCircularReference();

// 메모리 해제
circular = null

*2. 전역 객체 참조 *

// 전역 객체를 초기화하지 않으면 메모리가 해제되지 않음
window.leakedObject = {data: "This will not be collected"}

// 메모리 해제
window.leakedObject = null

3. 클로저

function createClosure() {
 let largeArray = new Array(100000).fill("leak");

 return function() {
        console.log(largeArray[0]);
        // 명시적 메모리 해제
            largeArray = null;
    };
}

// 실행 후 largeArray는 더 이상 참조되지 않음
let closure = createClosure();
closure(); 

현업에서 자바스크립트 엔진의 이해를 통해 개발한 경험은 해당 포스팅에서!

SSE 이용하여 브라우저 실시간 알림 서비스 구현하기

본격적으로 시작하기 앞서, 하나의 스레드 당 하나의 스택 메모리를 사용하는데 자바스크립트는 싱글 스레드 언어이기 때문에 콜 스택이라는 스택메모리 하나만 사용한다.

구성요소

자바스크립트 엔진에는 크게 두가지의 구성요소를 가지고있다.

콜 스택

코드가 위에서 아래로 실행될때 호출 스택을 저장하는 곳이다. 런타임 중 함수가 호출되면 콜 스택 제일 상단에 위치하고 함수 실행이 종료되면 스택에서 제거된다. 실행될 함수 단위를 실행 컨텍스트라고 부른다. 또한 콜스택에서는 자바스크립트의 원시 타입값이 저장된다.

그런데 싱글 스레드 언어인 자바스크립트가 어떻게 비동기를 처리할 수 있을까?

그 이유는 브라우저가 제공하는 기능을 활용하는 것이다.

Web APIs

비동기 작업을 처리하기 위해서 브라우저에서 제공하는 Web API를 활용한다. 비동기를 처리할 수 있는 브라우저 내장API의 집합이라고 보면 된다. Web API는 메인 스레드 (콜 스택)에서 비동기 작업을 받아 처리한다. 대표적인 DOM 조작, 네트워크 요청, 타이머 설정 등이 있다.

1. DOM API HTML 문서를 자바스크립트로 조작할 수 있게 해주는 API입니다. HTML 요소를 추가, 삭제, 변경하거나 스타일을 조작하는 등의 작업을 할 수 있도록 기능을 제공한다.

   let button = document.getElementById('myButton');
   button.addEventListener('click', function() {
   alert('Button clicked!');
   });

2. Fetch API 웹 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 API입니다. 주로 HTTP 요청을 보내고 응답을 받는 데 사용된다.

   fetch('https://api.example.com/data')
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.log('Error:', error));

3. Storage API 클라이언트의 브라우저에 데이터를 저장한다. 로컬 스토리지와 세션 스토리지를 이용하여 데이터를 브라우저에 영구적 또는 세션 기반으로 저장할 수 있다.

   localStorage.setItem('username', 'John');
   let username = localStorage.getItem('username');
   console.log(username);

4. Event API 사용자 인터렉션(클릭, 키 입력 등)과 같은 이벤트를 처리하는 API이다. addEventListener()를 사용하여 이벤트를 리스닝하고, 이벤트 핸들러를 실행할 수 있다.

   document.addEventListener('click', function(event) {
   console.log('Clicked on:', event.target);
   });

5. 타이머 API 일정 시간 후에 특정 코드를 실행하거나 반복적으로 코드를 실행할 수 있도록 하는 타이머 API이다. 비동기 작업의 일정 시간 지연 처리를 할 수 있다.

• setTimeout(): 일정 시간 후에 코드를 실행.
• setInterval(): 일정 간격으로 코드를 반복 실행

6. Notification API 웹 페이지가 사용자에게 시스템 알림을 보낼 수 있게 해주는 API입니다. 주로 푸시 알림이나 알림을 표시하는 데 사용된다.

7. WebSockets API 클라이언트와 서버 간에 지속적인 양방향 연결을 제공하여 실시간 데이터 전송을 가능하게 하는 API이다. 주로 채팅, 실시간 게임 등에 사용된다.

   let socket = new WebSocket('ws://example.com/socket');
   socket.onopen = function() {
   socket.send('Hello, server!');
   };
   socket.onmessage = function(event) {
   console.log('Received:', event.data);
   };

그 종류는 공식문서에서 찾을 수 있다

Callstack Queue

Web API가 받은 비동기 작업이 완료되면 이후에 실행할 콜백함수 등 후처리의 함수들이 대기하는 공간이라고 보면된다. 큐의 특성상 FIFO 구조로 콜스택에 실행 할 함수가 없으면 순차적으로 하나씩 함수를 콜스택으로 보내어 실행된다.

콜스택 큐에도 두가지의 종류가 있다.

• Task Queue : setTimeout, setInterval, fetch 등 비동기로 처리되는 함수들의 콜백이 저장됨
• Microtask Queue : promise, mutationObserver 등

*우선순위는 Task Queue < Microstask Queue *

Event Loop

싱글 스레드인 자바스크립트는 여러일을 처리하기 위해 지휘하는 지휘관이 필요한데, 이 역할을 이벤트 루프가 담당한다. 여러개에 작업중 우선순위를 결정하는 일 또한 이벤트 루프의 컨트롤에 의해 실행된다.

정리

1. 코드가 Call Stack에 쌓인 후, 비동기 함수는 Web API에게 위임합니다.
2. Web API는 비동기 작업을 수행하고, 콜백 함수를 Callback Queue에 push 합니다.
3. 이벤트 루프는 Call Stack에 비어있을 때, Callback Queue에 대기하고 있던 콜백 함수를 콜스택으로 push 합니다.
4. 콜스택에 쌓인 콜백 함수가 실행되고, 콜스택에서 pop 됩니다.

메모리 힙은 2탄에서...

https://velog.io/@hope_k/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84-%EB%8F%99%EC%9E%91%EB%B0%A9%EC%8B%9D-%EB%A9%94%EB%AA%A8%EB%A6%AC%ED%9E%99

사용자가 브라우저를 통해 특정 사이트를 방문했을때 브라우저는 서버에서 필요한 데이터를 (정적파일 등) 서버에서 받아 화면에 보여준다. 이러한 정보의 통로인 브라우저의 구성요소와 구조에 대해서 공부해보자!

브라우저 구조

1) 사용자 인터페이스

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 유저가 사용하는 브라우저, 유저와 가장 밀접하게 맞닿아 있음

2) 브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어하는 역할을 한다. 레이아웃 엔진이라고도 불리며 렌더링 엔진과 밀접하게 연관되어 있다.

웹 브라우저마다 전용 브라우저 엔진을 사용한다.

• Blink Engine (Chrome, Opera, Samsung Internet, MS Edge, Whale, Brave)
• WebKit Engine (Safari)
• Servo Engine (Firefox), Gecko Engine (Firefox)

  3) 렌더링 엔진

  요청한 콘텐츠를 화면에 출력하는 역할을 한다. HTML과 CSS를 파싱해 최종적으로 화면에 그려주며, HTML 및 XML 문서와 이미지를 표시할 수 있다.

렌더링 엔진은 아래의 순서로 컨텐츠를 화면에 표시한다.

4) 통신

HTTP 요청과 같은 네트워크 호출을 담당한다. 서버에서 받은 URI에 해당하는 응답 데이터를 렌더링 엔진에게 돌려주는 역할을 한다.

5) 자바스크립트 엔진 (=자바스크립트 해석기)

자바스크립트 코드를 해석하여 컴퓨터가 읽을 수 있는 기계어로 변환해주는 인터프리터이다.

인터프리터란? 프로그래밍 언어의 소스코드를 바로 실행하는 프로그램 또는 환경을 말함

웹 브라우저마다 전용 자바스크립트 엔진이 탑재되어있다.

• V8: Google, Chrome, Node JS
• Rhino Engine: Mozilla, Firefox
• Webkit Engine: Apple, Safari

근래 제일 많이 쓰고있는 크롬 브라우저의 V8 엔진의 작동 원리는 아래와 같다.

6) UI 백엔드

렌더링 엔진이 분석한 렌더트리를 브라우저에 그리는 역할을 수행한다. Input, Select, Button.. 기본위젯 등

7) 자료 저장소 (=웹 스토리지)

영구적인 저장소인 로컬 스토리지와 임시 저장소인 세션 스토리지를 두어 응용 환경에 맞는 선택이 가능하다.

• 로컬 스토리지 : 보관 기한이 없는 데이터, 브라우저를 닫거나 컴퓨터를 재부팅해도 사라지지 않는다. 도메인 마다 별도의 로컬 스토리지가 생성되며, 도메인만 같으면 전역으로 데이터 공유가 가능하다.
• 세션 스토리지 : 하나의 세션만을 위한 데이터를 저장한다. 브라우징 되고 있는 브라우저 컨텍스트 내에서만 유지되기 때문에 브라우저 탭을 닫으면 데이터가 사라진다.

웹 브라우저에서 직접 데이터를 저장할 수 있고 서버에 전송되지 않는 데이터이다. 서버 네트워크 트래픽 비용을 절감 시킬 수 있다. 웹 스토리지는 출처(Origin)마다 단 하나씩 존재하고, 하나의 출처에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근 할 수있다.

리액트는 컴포넌트들의 집합이다. 개인적으로 컴포넌트를 잘 설계하여 랜더링을 최소화 시키고 재사용 하는것이 🌸리액트 기술의 꽃🌸이라고 생각한다!

컴포넌트를 만드는 두 가지 방법

리액트에서 컴포넌트를 생성하는 방법에는 두가지가 있다. 하나는 클래스를 통해, 하나는 함수를 통해 생성된다. 두 가지의 기능적 차이는 없지만 리액트에서는 함수형 컴포넌트를 권고한다. (힙 메모리 사용도 미세하지만 함수형이 더 적게 씀)

1. 클래스형

자바스크립트 ES6에서 클래스가 정식 도입되면서 리액트에서 클래스를 통해 컴포넌트를 생성할 수 있게 되었다.

기본 형태

import { Component } from 'react';

class MyComponent extends Component {
   constructor(props: any) {
    super(props);
    this.state = {
           count: 1 
    }
  }

   render() {
        const state = this.state
     const props = this.props
        return <div>클래스 컴포넌트 형태</div>
   }
}

export default MyCompoent

• constructor: 컴포넌트 생성자 super(props) 필수
• render: JSX를 반환하여 화면을 그린다.
• this: React Component 내 속성값들

  {    
    props:{},
    context:{},
    refs:{},
    updater:{
        enqueueForceUpdate: f,
        enqueueReplaceState: f,
        enqueueSetState: f,
        isMounted: f
    },
    state: {
        count: 1
    },
    _reactInternals:{
        queue:[],
        replace:false
    }
  }
  

- props: 컴포넌트가 부모로부터 받은 속성값, 변경될때 리렌더링 된다.
- context: React Context API를 사용할때 접근할 수 있는 contect
- refs: 컴포넌트에서 선언한 refs, DOM 요소나 다른 컴포넌트의 인스턴스를 참조하는 객체
- updater: 컴포넌트 상태를 업데이트하는데 사용되는 내부적인 객체, 상태 변경을 위한 비동기 큐 및 업데이트 메커니즘을 담당 
- state: 컴포넌트 내 관리하는 데이터들, 변경될때 리렌더링된다. 
- _reactInternals: 리액트 내부 구현에 관련된 정보, 직접 다룰 필요 없음. 
(예시에서 queue는 상태 업데이트 큐이며, replace는 상태가 교체되지 않고 업데이트 될 것임을 나타냅니다. 
이 객체는 React의 내부 최적화 및 리렌더링 관리에 사용됩니다.)


### 2. 함수형 (권고)
리액트 16.8 이상에서 Hooks가 나오면서 클래스형 컴포넌트의 모든 기능을 대체할 수 있게 되었다. 

#### 기본 형태
```javascript
import React, { useState } from 'react';

const MyComponent = (props) => {
  const [count, setCount] = useState(0);
  return <div>함수형 컴포넌트 형태</div>;
};

export default MyComponent;

• 함수형에서 this는 undefind
• this.state 👉 useState()
• this.props 👉 함수 컴포넌트의 인자
• this.context 👉 useContext()
• this.refs 👉 useRef()

Props & State

props

• 컴포넌트 생성할때 참조되는 값으로 읽기 전용이다.
• 부모에서 자식으로 전달하는 값이다.
• prop 값을 변경하고 싶을땐 선언한 부모컴포넌트에서 변경해야한다.

state

• 컴포넌트 내에서 스스로가 관리하는 값이다.
• 마음대로 변경해도 됨, 단 React Hook의 setter 를 통해야한다.
• 값은 원시형, 참조형, null 등 데이터 타입은 상관없이 선언 할 수 있으나, 참조형 데이터를 변경시 사본을 생성 기존 데이터를 엎어쳐 갈아끼운다.

Object: spread 연산자 사용

const [profile, setProfile] = useState({
    name: 'hope',
    age: 10,
       address: '경기도'
})

// 주소만 변경하고 싶을때
const newProfile = {...profile, address: '경기도 수원시'}
setProfile(newProfile)

Array: spread 혹은 배열 함수 사용

const [productIds, setProductIds] = useState([1, 2, 3, 4, 5])

const addProductIds = productIds.concat(6)
const removeProductIds =productIds.filter((id) => id > 3)
const newProductIds = [...productIds]

참조형 데이터 타입의 state 변경 방법에는 한가지 공통점이 있다. 바로 새로운 주소값을 할당하는 것이다. 즉, 데이터 사본을 만든다 = 새로운 주소값을 할당

그럼 왜 기존의 할당된 데이터 자체를 수정하지 않고 새로 주소값을 할당하는 것일까?

1장에서도 다루었고 추후에 더 깊이 다루겠지만 리액트는 렌더링 전 가상돔과 값의 비교를 통해 변화를 감지한다고 했다. 만약 참조타입의 주소값이 아닌 데이터 값을 일일히 깊은 비교를 하게 된다면 연산의 비용이 크게 들것이고, 지금의 리액트와 같이 빠른 퍼포먼스는 기대하기 힘들것이다. 리액트는 얕은 비교를 통해 빠르게 데이터 변화를 감지하고 화면을 전환한다. 그렇기때문에, 참조형 데이터는 데이터의 사본을 통해 새로운 메모리 주소를 할당받아 변화를 감지하는 작업으로 동작된다.

이것이 바로 리액트에서 꼭 지켜야할 데이터의 불변성 특징(Immer)이다.

그럼 2장에서 다룬 내용들을 좀 더 깊게 파보도록 하겠다!

create-react-app

리액트 프로젝트를 처음 시작할때 콘솔창에 입력하는 명령어가 있다. (npx는 npm v5 이상부터 쓸 수 있는 노드 실행 도구이다.)

$npx create-react-app my-project

위의 명령어를 실행하면 아래와 같은 로그가 찍힌다.

react, react-dom, react-scripts, cra-template을 설치하고 1316개의 패키지가 자동으로 같이 추가되었다.

// 자동으로 package.json에 추가된 설정들
{
  "name": "my-product",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1"
  },
 ...
}

• react: React 라이브러리로, 애플리케이션의 사용자 UI 를 구성하는 데 사용한다. 상태, 속성을 사용하여 동적인 웹 애플리케이션을 만든다. 또한 가상돔을 사용하여 UI 변경 사항을 효율적으로 처리한다.

• react-dom: React 애플리케이션을 DOM에 렌더링하는데 사용되는 라이브러리이다. 리액트는 가상돔을 사용하여 UI를 관리하지만, 실제 DOM 변경사항에 반영하고 연결하는 일은 react-dom의 역할이다.

• react-scripts: create-react-app에서 제공하는 개발용 도구 모음이다. 개발할때 필요한 도구들을 자동으로 설정하여 바로 개발할 수 있도록 한다.

  • Webpack: 코드 번들링을 담당하는 도구로, 애플리케이션의 자바스크립트, CSS, 이미지 파일 등을 번들링하여 최적화한다.
  • Babel: 최신 JavaScript(ES6 이상) 문법을 구형 브라우저에서도 동작할 수 있도록 변환해주는 트랜스파일러
  • EsLint: 코드 품질을 유지하기 위해 정적 코드 분석을 수행하는 도구
  • Jest: React 애플리케이션의 테스트를 위한 프레임워크이다.
  • CSS 모듈: CSS 파일을 모듈화하여 각 컴포넌트에게만 적용되는 스타일을 작성할 수 있다.

• cra-template: Create React App 프로젝트의 기본 템플릿을 제공한다. 이 템플릿은 프로젝트의 초기 구조와 설정을 정의한다. 사용자가 설정을 수정할 필요 없이 바로 개발을 시작하게 한다.

  • 기본적인 파일 구조 (예: src, public 폴더, index.html, index.js 등)
  • 기본 React 설정 (예: React.StrictMode, App 컴포넌트 등)
  • 개발 환경을 위한 설정 (예: Webpack, Babel, ESLint 등)

. . . . . [2025-11-12 업데이트]

CRA Deprecated 중단 이유

활발한 유지보수 부족

• CRA는 현재 “새로운 기능” 추가보다는 유지보수 모드로 들어갔습니다. 공식 블로그에서 “active maintainers(활성 유지보수자)가 없다”는 언급이 있습니다.

현대적인 요구사항을 제대로 내장하지 않음

CRA 초기에는 좋은 출발점이었지만, 지금 React 앱을 실제로 운영하고 확장할 때 필요한 여러 기능들이 기본에 빠져 있습니다:

라우팅(routes)이나 데이터 패칭(data fetching) 같은 기능이 기본 세팅에 포함되어 있지 않음.

코드 스플리팅(code splitting), 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG) 같은 성능/최적화 관련 기능이 내장되어 있지 않음.

번들러로 사용하는 Webpack 기반 설정이 최근의 빌드툴들(예: Vite 등) 대비 느리고 유연성이 떨어짐.

더 나은 대안의 등장

React 생태계 외에도 빠르게 발전한 여러 툴/프레임워크들이 등장했고, 이들이 CRA의 약점을 상당부분 보완했습니다. 예컨대 Vite, Next.js 등이 그런 대안입니다.

리액트와 노드는 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기에 개발에 있어 꼭 필수적인 요소가 되었다.

주로 사용하는 개발 도구에는

1) 구 브라우저에서 지원하지 않는 자바스크립트 문법을 호환시켜주는 바벨 2) 모듈화된 코드를 한 파일로 합치고(Bundler)하고 코드를 수정할때마다 웹 브라우저에서 리로딩(Hot-reload) 시켜주는 기능을 가진 웹팩 등이 있다.

노드를 설치하면 노드의 패키지 매니저인 npm이 같이 설치된다. npm은 똑똑한 개발자들이 미리 만들어놓은 라이브러리를 설치하고 버전을 관리하여 프로젝트의 질을 높여준다.

(npm 저장소에 등록된 패키지는 약 82만개로 엄청난 선물같은 패키지들이 있다...)

너무 많은 패키지들 중 뭘 써야하지? 고민된다면 NPM Trends를 참고하자 ㅋㅋ https://npmtrends.com/

NVM

macOS에서는 Node.js를 여러 버전으로 설치하여 관리해주는 nvm 도구를 주로 사용한다. 추후에 노드 버전을 업데이트 하거나, 프로젝트 별로 버전이 다른 노드를 사용해야 할 경우 유용하기 때문이다.

여러가지 노드 패키지 매니저들

여러가지 개발 환경에서 적절한 패키지 매니저를 골라 사용하면 된다.

npm : 가장 보편적이고 작은 프로젝트에서 적합

• Node.js의 공식 패키지 매니저로, node 설치시 함께 설치된다.
• package.json 파일을 사용하여 프로젝트 의존성을 관리한다.
• package-lock.json 을 도입하여 의존성 버전을 고정하고, 설치된 패키지의 정확한 버전을 추적한다.
• 단일 레지스트리에서 패키지를 다운로드하고 관리한다.

  yarn : 속도와 안정성 면에서 우수하고 큰 프로젝트에서 모노레포 환경에 유리함

• npm의 속도를 개선하고, 더 나은 의존성 관리를 제공한다
• npm와 호환되어 package.json을 그대로 사용한다.
• yarn.lock 파일을 사용하여 의존성의 버전을 고정하고, 팀 간의 일관된 환경을 보장한다.
• npm 은 패키지를 병렬로 설치하여 npm보다 더 빠른 설치 속도를 제공한다. 특히 캐싱을 사용하여 이미 설치된 패키지를 재사용하여 속도 향상을 이끈다.
• yarn은 여러 패키지를 하나의 레포에서 관리할 수 있는 워크스페이스 기능을 제공한다. 이를 통해 모노레포(Monorepo)에서 여러 패키지를 쉽게 관리할 수 있다.

pnpm : 디스크 공간과 성능에 효율적이며, 많은 프로젝트에서 의존성을 공유하고 빠른설치를 원한다면

• pnpm는 패키지 설치의 성능을 극대화 시키기 위해 설계된 패키지 매니저이다.
• 심볼릭 링크를 사용하여 여러 프로젝트에서 공통된 의존성을 공유한다. 즉 하나의 의존성 패키지가 여러 프로젝트에서 재사용될 수있다.
• pnpm는 병렬설치와 패키지를 중복없이 설치하므로 패키지 설치 속도가 매우 빠르다.
• 엄격한 의존성 관리로 패키지간의 충돌을 줄이고 패키지가 정확히 선언된 의존성만을 사용하도록 한다.
• npm와 완벽하게 호환되어, package.json, package-lock.json 파일을 그대로 사용한다.

package.json 구성요소

1. 기본 구성 요소

npm init -y

위의 명령어를 실행하면 기본 설정값의 package.json을 생성할 수 있다.

{
  "name": "PROJECT_DIRECTORY",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

각각 기본 구성요소들을 알아보자

• name: 패키지의 이름을 나타내는 것으로 필수항목
• version: 패키지의 버전을 나타내는 것으로 필수항목
• descrition: 패키지에 대한 설명으로 npm에 검색되었을때 리스트에 표시되어 사람들이 쉽게찾는데 도움을 준다.
• main: 패키지의 진입점(entry point)가 되는 모듈 ID이다.
• scripts: 패키지의 생명주기에서 자주 사용할 command를 alias를 통해 지정한 명령어들
• keywords: descrition와 마찬가지로 npm에서 검색되기 위한 키워드들
• author: 배포자 이름
• license: 배포한 패키지에 대한 권한과 제한사항이 있는지 알기위한 용도

2. 의존성 관련 요소들

"dependencies" : {
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
},
"devDependencies" : {
  "eslint": "^8.31.0",
  "prettier": "^2.8.1",
  "typescript": "^4.9.4"
},
"files": [
    "dist/",
    "js/{src,dist}/",
    "scss"
]

• dependencies: 프로덕션 환경 및 런타임에 사용되는 일반적인 종속성을 가진 라이브러리가 위치한다. 서비스 로직과 관련된 라이브러리, React, 상태관리 라이브러리 등이 있다.
• devDependencies: 로컬 개발 환경 또는 프로젝트 빌드에만 필요하거나 서비스 로직과 관련없이 개발시에만 필요한 라이브러리를 설치한다. 예시로는 webpack, testing lib, typescript 관련 (@types/*), eslint, prettier, storybook 등이 있다.
• files: 패키지가 의존성으로 설치될 때 같이 포함될 파일들의 배열이다. 생략하면 자동 제외로 설정된 파일을 제외한 모든 파일이 포함된다.

  • 설정과 관계없이 무조건 포함되는 파일들: package.json, README, CHANGELOG, LICENSE 또는 LICENCE
  • 항상 무시되는 파일들: .git, CVS, .sv 등

그 밖에 협업에서 작업 환경 설정시 필요한 플러그인

ESlint : 코드 정적 분석기

• ESLint는 코드의 스타일뿐만 아니라 코드의 구조, 문법, 베스트 프랙티스 등을 관리하는 규칙을 제공한다.
• 코드의 잠재적 오류, 구문 오류, 실수, 안티패턴 등을 찾아내고 경고 또는 오류를 발생시킨다.
• 사용자가 설정한 규칙에 맞는지 검사하고, 위반된 부분에 대해 경고 또는 오류를 반환한다.
• 자동수정 기능을 제공하여 코드의 오류를 검사하여 자동수정한다.
• .eslintrc.json 에 사용자 규칙을 설정한다.

  {
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
  }

Prettier : 코드 포멧터

• 코드 형식을 일관되게 수정하여 협업시 일관된 코드를 보장하여 관리가 쉽다.
• .prettierrc 에 규칙을 설정한다.

  {
  "singleQuote": true,
  "trailingComma": "all"
  }

리액트를 다루는 기술의 책 1장에서는 리액트의 대표 컨셉과 중요한 특징을 다루고 있다. 여기서 제일 중요한 가상돔을 사용한 화면(Interface) 표현에 대해서 집중적으로 공부해보도록 하겠다! 🤗

리액트 컨셉

리액트 컨셉은 굉장히 단순하면서 터프하다 기존 자바스크립트의 라이브러리인 jQuery 와 비교해보면 왜 단순하고 터프하다고 하는지 알 수 있다.

만약, 사용자가 버튼을 눌러 Count 값을 1 증가한다고 생각해보자. 먼저, 제이쿼리에서

<html>
  <body>
    <p id="result">0</p>
    <button id="button">Click!</button>
  </body>
</html>

var count =$("#result").text();

$("#button").click(function(){
    count++;
    $('#result').text(count);
    $('#result').html($('<b>새로운 HTML</b> 콘텐츠');
})

제이쿼리에서는 자바스크립트를 통해 DOM 내부 요소에 직접 접근하여, 내부 데이터를 직접 조작하여 업데이트 하는 직관적인 방식을 사용한다.

제이쿼리는 직관적이라는 장점이 있는 반면, 치명적인 단점이 있다.

• 셀렉터로 직접 조작하기 때문에 DOM 탐색이 빈번하게 일어난다.
• DOM 반복적인 업데이트시 비효율적인 반복작업이 일어난다. 아래의 상황에서 #list에 li 요소를 반복적으로 추가하고 있습니다. 이때 1000번의 DOM 업데이트가 발생한다. 🤮

for (var i = 0; i < 1000; i++) {
  $('#list').append('<li>' + i + '</li>');
}

각 업데이트마다 화면이 새로 렌더링되며 따라서 대규모 DOM 에서는 성능저하가 빈번하게 일어난다.

그럼 똑같은 상황에서 리액트는 어떨까? 결론적으로 말하면, 리액트는 데이터가 바뀌면 그 데이터가 포함된 컴포넌트 자체를 싹 교체해버린다. (Reconciliation)

리액트에서 중요한 개념인 컴포넌트가 등장하는데 개발자는 화면상에 데이터를 어떤 방식으로 노출하고, 어떻게 처리할지 등의 정보를 포함한 컴포넌트 단위를 개발한다.

이후에 개발자가 작성한 코드를 읽어 리액트는 최초 렌더링과, 리렌더링을 통해 데이터 변화에 대응한다.

최초 렌더링

리액트 앱를 최초로 실행하면, 리액트의 ReactDOM.render() 또는 createRoot().render()가 호출된다.

// index.js 또는 main.js
import React from 'react';
import ReactDOM from 'react-dom/client'; // React 18 이상에서는 createRoot 사용

import App from './App'; // 메인 App 컴포넌트

// React 18 이상에서는 createRoot 사용
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

이때 리액트가 가진 엄청난 강점이 발휘된다. 리액트는 render()함수를 통해 Root부터 최하위 노드의 Child Component 까지 재귀함수를 통해 순회하며 각각 컴포넌트의 정보를 읽어 객체로 생성한다.

위에서와 같은 Count를 증가시키는 리액트 함수형 컴포넌트의 예시이다.

const CountComponent = () => {
  const [result, setResult] = useState<number>(0)

  return (
  <div>
       <p>{result}</p>
       <button onClick={() => setResult(result++)}>Click!</button>
  </div>
)}

리액트는 render() 함수를 통해 DOM 내부에 선언된 컴포넌트를 순회하며 자바스크립트 객체를 생성한다.

중요해서 다시한번 말해보았다. ㅋㅋ

위와 같은 컴포넌트를 읽을때 리액트는 다음과 같이 자바스크립트 객체를 생성한다. 리액트 가상돔 객체 안에는 객체 뷰가 어떻게 생겼고, 어떻게 동작하는지에 대한 정보를 담고 있다. 또한 가상돔임을 증명하는 Symbol 값과, 각각 Element들을 고유하게 구분하는 Key 값을 가지고 있다.

const virtualDom = {
  type: 'div',
  props: {
    children: [
      {
        type: 'p',
        props: {
          children: ['0'] // result의 초기값인 0
        }
      },
      {
        type: 'button',
        props: {
          children: ['Click!'],
          onClick: expectFunction // onClick 이벤트 핸들러 (setResult 호출)
        }
      }
    ]
  }
};

그리고 최상단부터 최하위까지의 객체 생성과정이 끝나면 HTML 마크업을 만들고, 실제 DOM 안에 주입하여 사용자가 볼 수 있는 화면이 렌더링된다.

Reconciliation, 리렌더링

화면에 CountComponent가 그려지고 사용자는 button을 클릭하여 result 데이터를 1증가 시키려고한다.

리액트는 해당 컴포넌트의 데이터를 직접 바꾸지 않는다. 컴포넌트 내에 데이터 값이 변경되면, 해당 데이터를 기반으로 render() 함수를 다시 실행시켜 새로운 virtualDom 객체를 생성한다. 그리고 리액트는 새로 생성된 가상 DOM 객체는 Diff 알고리즘을 통해 이전 DOM과 비교하는 작업을 거친다. 이 과정에서 데이터가 바뀐 부분을 dirty 체크를 하고 batch에 추가한다. (속성 값이 변한 경우에는 속성 값만 업데이트하고, 해당 엘리먼트의 태그 혹은 컴포넌트가 변경되면 해당 노드를 포함한 하위 모든 노드를 제거(언마운트)한 후 새로운 엘리먼트를 생성한다)

이런식으로 batch에 쌓인 모든 변경사항을 처리 한 후, 딱 한번 DOM을 업데이트 한다.

우리가 알고있는 가상돔, Virtual DOM은 위의 과정을 말한다. 리액트는 가상돔의 객체를 생성하여 실제 돔의 반영까지 비교연산을 수행하여 필요한 부분만 최적화하여 렌더링 하는 작업을 관리해준다.

리액트의 비교 알고리즘

위에서 언급한 바와 같이 리액트는 어떤 비교 알고리즘에 의해 이전 돔과, 바뀐 돔을 비교하여 재조정(Reconciliation)을 통해 화면을 다시 생성하는 작업을 반복한다. . . . 여기서 두 가지 의문점이 생길 수 있다. 🤔

Question1. 데이터 하나가 바뀔때, 그 많은 요소들의 객체를 처음부터 끝까지 탐색한다고? _Question2. 자바스크립트 언어인데 어떤 기준으로 속성값의 데이터를 비교하여 변경이 감지되는거지? _

Answer1. Diffing, 휴리스틱 알고리즘

리액트는 각 노드 컴포넌트들의 객체 정보를 가지고있다. 그리고 이를 비교하는데 모두 다 비교하기에는 너무 큰 비용이 발생한다.

휴리스틱 알고리즘이란? 기본적으로 모두 최적해가 될 가능성이 없는 답들을 탐색하는 것을 방지하여 만들어봐야 할 답의 수를 줄이는 것을 목표로 한다.

리액트는 휴리스틱 알고리즘 방식을 채택했다. 간단히 이야기하면 전부 비교하지 않고, 상식적으로 바뀔만한 곳만 비교하여 비교에 발생하는 비용을 절감하겠다는 기조이다.

리액트는 아래와 같은 방식으로 변화를 감지한다.

1. 총 노드의 개수가 같을때 노드의 레벨별로 비교한다.

2. 레벨별로 비교를 하다가 요소의 타입, 예를들어 p -> div 바뀌거나, 다른 컴포넌트가 들어가는 등의 변화를 감지하면 해당 노드를 포함한 하위 노드를 제거(언마운트)한 후 새로 생성한다.

3. 요소의 타입이 같고 속성만 같은경우는 내부 가상돔 객체의 프로퍼티 값만 수정한다.

4. 같은 레벨간의 형제 요소들간의 key를 부여하면 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 확인하여 불필요한 비교를 줄일 수 있다.

   유니크한 키는 데이터상 절대 변하지 않은 key 값으로 사용하자, index를 사용하는건 최후의 방법!

Answer2. 데이터 타입의 따른 속성 비교, Object.is()

근데 리액트는 자바스크립트의 언어이다. 자바스크립트의 데이터는 원시형과 참조형 데이터로 나뉘고 각각의 Equal 연산은 다르게 동작하고 있다.

• 원시형 (문자 타입, 숫자 타입, Boolean 타입 등): 값 자체를 비교함
• 참조형 (배열 타입, 객체 타입, 함수형 타입 등): 주소 값을 비교함

따라서 리액트의 비교 연산 알고리즘을 모르고 사용한다면, 데이터가 변화하지 않는 등의 개발자의 의도와 다르게 실행될 수 있다. (실제로 현업에서 많은 버그를 발생시킴)

리액트는 Object.is로 먼저 비교를 수행한 다음에 Object.is에서 수행하지 못하는 비교, 즉 객체 간 얕은 비교(객체의 첫 번째 깊이에 존재하는 값만 비교)를 한 번 더 수행한다.

- 얕은 비교(Shallow Compare)란? 원시타입은 값을 비교한다. 객체 등 참조타입의 경우 참조값만 비교한다. 
- 깊은 비교(Deep Compare)란? 객체 내 중첩된 객체까지 값을 비교한다. 

리액트는 state, props의 데이터의 값이 변경되면 렌더링이 일어난다. props는 객체이고, 기본적으로 리액트는 props에서 꺼내온 값을 기준으로 렌더링을 수행하기 때문에 일반적인 케이스에서는 얕은 비교로 충분하여 얕은 비교를 사용한다.

만약 props가 깊은 객체를 가지고 있다면 어떻게 될까? 일반적인 컴포넌트 같은 경우에는 대부분 렌더링될것이다. 그러나 React.memo()를 사용하여 컴포넌트를 최적화 하고 싶을때는 예상하지 못한 케이스가 발생한다.

깊은 객체의 경우, 실제로 데이터가 변경된 값이 없음에도 불구하고, 데이터가 변경되었다고 감지하여 (값은 똑같으나 주소값이 달라지는 경우), 메모이제이션 된 컴포넌트를 반환하지 못한다.

만약 이럴 경우는 Deep Compare 방식을 채택하여 메모이제이션을 할 수 있다.

import { isEqual } from 'lodash';

const DeepCompareComponent = React.memo(MyComponent, (prevProps, nextProps) => isEqual(prevProps, nextProps));

. . . . .

[11/12 업데이트]

리액트 내부 객체 , Fiber

리액트 버전 16부터 등장한 재조정 엔진이다. 핵심 기능은 증분 렌더링으로, 렌더링 작업을 여러 개의 덩어리로 나누어 처리하는 것이다. 이로써 새로운 업데이트가 들어올 때 작업을 일시 중지, 중단, 재사용 등을 통해 업데이트의 우선순위를 지정하는 기능, 새로운 동시성 기본 기능을 사용할 수 있게 되었다.

• useTransition UI 업데이트 중 긴 연산(데이터 패칭 등)과 즉시 반영해야하는 입력을 분리한다.

  import { useTransition } from "react";
  

function Example() { const [isPending, startTransition] = useTransition(); const [data, setData] = useState([]);

const handleChange = (e) => { startTransition(() => { // 우선순위 낮은 작업 (렌더링 지연 가능) setData(fetchFilteredData(e.target.value)); }); };

return ( <> {isPending ?

Loading...

- `useDeferredValue` 값 자체를 지연(defer) 시켜서 렌더링을 느리게 처리할 수 있다.
```javascript
import { useDeferredValue } from "react";

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => searchData(deferredQuery), [deferredQuery]);

  return <ResultsList results={results} />;
}

BFS (기준점의 인접한 노드들 우선 탐색하는 방법)

• 넓게 탐색
• 최단거리/ 땅따먹기/ 경로 탐색 등
• 방문여부 필수
• 재귀 X
• 선입선출 큐 사용
• 큐를 이용한 반복적인 형태로 구현

DFS (다음분기를 넘어가기전 해당 분기를 완벽하게 탐색하는 방법)

• 깊게 탐색
• 특정 조건을 만족하는 경로 탐색/ 백트래킹
• 자기 자신을 호출하는 재귀 사용
• 방문여부 필수
• 후입선출 스택 사용

제네릭(Generic)이란?

개념

제네릭, 영어 사전적 의미로 일반적인 이라는 뜻을 가진다. 객체지향의 개념을 가진 언어에서 클래스 또는 메서드 내부의 데이터 타입을 일반화하는 것을 말한다. 그리고 실제 로직 내부에서 인스턴스를 생성할때 타입을 지정한다!

문법

타입 매개변수

제네릭은 <> 꺽쇠 괄호 키워드를 사용하고 꺽쇠 괄호 안에 식별자 기호(보통 T)를 지정함으로써 파라미터화 할 수 있다. 이것은 마치 메소드가 매개변수를 받아 사용하는 것과 비슷하여 타입 매개변수 라고 부른다.

코드

클래스명 옆에 <T> 라는 기호로 제네릭을 붙여줬다. 그리고 클래스 내부에서 식별자 기호 T를 클래스 필드와 메소드의 매개변수의 타입으로 지정했다.

제네릭 타입의 클래스 생성

class Member<T> {
    List<T> users = new ArrayList<>();

    public void signUp(T user) {
        users.add(user);
    }
}

하나의 클래스의 다른 타입의 인스턴스 생성

Member<String> strMemebers = new Member<>();
Member<Integer> intMembers = new Member<>():

복수 타입의 제네릭 매개변수

class Cart<T, U> {
    List <T> carts = new ArrayList<>();
    List <U> baskets = new ArrayList<> ();

    public void add(T cart, U basket) {
        carts.add(cart);
        baskets.add(basket);
    }
}

Cart<String, String> myCart = new Cart<>();

유의할 점

제네릭 제약의 필요성

제네릭은 참조형 타입을 모두 받을 수 있기때문에 발생하는 사이드이펙트가 있다. 만약 Integer 타입 전용으로 만든 클래스에 문자열 파라미터가 들어가면, 컴파일 과정에서는 에러가 발생하지 않으나, 런타임 오류가 발생할 수 있다. 이를 위해 제네릭은 제한을 걸어 둘 수 있다.

extends, super, ?(와일드카드)

• extends T 상한 경계로 T와 T의 사존 타입에 대해서만 지정 가능하다. T를 Food Class로 지정시, Food 클래스를 상속한 Water, Pizza, HawaiiPizza, CombiPizza 모두 가능
• super T 하한 경계로 T와 T 부모 타입에 대해서만 지정가능하다. T를 Pizza로 지정시, Pizza, Food만 사용가능

장점

• 코드의 재사용성
• 코드의 확장성

프로젝트의 특성마다 필요로하는 언어, 라이브러리의 스펙이 달라지며 이를 잘 선택하는 안목 또한 개발자가 갖추어야할 소양이라고 생각한다.

1. 신규 프로젝트 간략 소개 일부 클라이언트를 위한 상품목록, 주문, 결제등을 갖춘 폐쇄몰 쇼핑몰의 느낌이지만, 추후 B2C 공개몰로 전환할 가능성이 있음 공개몰로 전환될 가능성이 있는 폐쇄 쇼핑몰의 특성을 가진 프로젝트를 개발할 예정이다. 또한 다국어를 지원하는 글로벌한 반응형 쇼핑몰을 개발하는 것이 이 프로젝트의 목적이다.

2. 리액트 v18 선택

3. App Router vs Pages Router 리액트 공식문서에서는 이 둘을 이렇게 이야기 하고있다. 앱 라우터는 페이지 라우터를 개선하여 만들었고 권장하는 라우팅 방식이다.

1) App router 장점

• layout.tsx 를 통해 하위 Segment들과 UI, 및 State 자원등을 공유하고 상태를 유지하여 리랜더링을 방지한다.
• 다양하고 최적화된 리액트 기능을 사용할 수 있다. ex) Error Boundery, Suspence
• SSR, CSR 등 필요한 렌더링을 쉽게 사용할 수 있다.

4. 상태관리 Zustand

5. Fetching 도구 SWR vs react-query vs next fetch

• 서버 컴포넌트에서는 Next 에서 제공하는 fetch 기능을, 클라이언트 컴포넌트에서는 SWR을 사용하는 것은 어떨까?

6. 스타일 라이브러리 tailwind.css vs matierial css vs styled-components vs Radix

• styled-components 는 스타일을 런타임에 생성하기 때문에 캐싱이 어렵고 javascript 해석 시간이 소요된다.
• SSR 스타일을 적용하기도 tailwind.css 가 유리하다.
• tailwind.css 는 제한된 스타일링만 사용가능하다는 단점이 있다.
• Material UI는 낮은 러닝커브와 빠른 개발속도의 장점이 있고, 테마 지정 및 스타일 재정의를 통해 높은 수준의 유연성을 제공하지만 Tailwind CSS에 비해 디자인 자유도가 높지 않을 수 있다.

6. 패키징 매니저 yarn vs yarn berry vs pnpm

7. 모듈 번들러 도구 webpack vs vite