클라우딩 어플리케이션 엔지니어링 TIL (7주차 - 4)

성능 최적화 2

불필요한 리렌더 방지

현재 일기장 기록 삭제 시 일기장 작성 컴포넌트가 리렌더되는 문제 발생(컴포넌트간 독립성 낮음)
1.useMemo를 써서 감싸보가
2.useCallback함수를 써서 함수 작동을 메모이제이션으로 감싸기

2-1. useCallback만 사용 시 원래 일기가 사라지는 문제 발생, 데이터 저장 시 함수형 데이터 저장 해야 함

나머지 컴포넌트 최적화

일기 저장, 일기 아이템 최적화
1.일기 삭제 시 나머지 아이템 전부 리렌더링 됨 -> 삭제 이후에도 리렌더링 되지 않도록 하기

UseReducer 사용하기

UseReducer, dispatch()를 사용하여 복잡한 상태 관리를 간단하게 만들 수 있다.

Context로 데이터 공급하기

1.Data, App 내부 함수들 Context를 통해 하나로 묶기


2.각 함수 내부에 필요한 값과 함수 분배하기

번외:ID 문제 해결해보기

현재 ID생성을 보면 ID 생성 호출이 두번 되어 0~19가 아니라 21~39로 되는 문제가 있다.

해당 문제를 수정해보기 위해 무엇을 해야 할까?
ChatGPT를 통해 수정된 코드는 다음과 같다.

const getData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/comments")
    .then((res) => res.json());

  const initData = res.slice(0, 20).map((it, index) => {
    return {
      author: it.email,
      content: it.body,
      emotion: Math.floor(Math.random() * 5) + 1,
      created_date: new Date().getTime(),
      id: index // 직접 index를 id로 사용
    };
  });

  // initData 처리 후, dataId.current를 마지막 할당된 id 다음 값으로 설정
  dataId.current = initData.length;

  dispatch({type: 'INIT', data: initData});
};

기존 코드와의 차이점은 다음과 같다.

const getData = async () => {
    setTimeout(async () => {
      const res = await fetch(
        "https://jsonplaceholder.typicode.com/comments"
      ).then((res) => res.json());

      const initData = res.slice(0, 20).map((it) => {
        return {
          author: it.email,
          content: it.body,
          emotion: Math.floor(Math.random() * 5) + 1,
          created_date: new Date().getTime(),
          id: dataId.current++
        };
      });

      dispatch({ type: "INIT", data: initData });
    }, 2000);
  };

dataId.current++를 Index를 통해 직접 부여함으로써 getData와 onCreate의 호출 사이에서 중복 ++를 방지함으로써 인덱스를 0~19로 만드는게 주요 골자인 것 같다. 이처럼 호출 사이에서 데이터가 중복되는걸 방지하는 것이 중요하다는 것을 알게 되었다.
아니면 getData와 onCreate 사이의 로직을 적당히 조율하여 데이터 ID의 중복 호출을 방지하는 것도 있을 수 있다. 코딩을 할 때에는 항상 특정 방안에 얽매이지 않고 다양하게 생각해보는 것이 중요하다고 생각된다.