[클라우딩 어플리케이션 엔지니어링 TIL] 240208 - React 기본. 간단한 일기장 프로젝트 4

Intro

---

오늘은 간단한 일기장 프로젝트 마지막 강의!!

 

 

 

 

오늘 학습한 내용

---

최적화3 - 컴포넌트 & 함수 재사용하기

컴포넌트를 최적화하기 위해선 어떤 컴포넌트가 최적화 대상인지 찾아낼 수 있어야 한다.

➡️ Chrome 확장 앱 React Developer Tools를 잘 활용하자!!

 

useCallback

특정 함수를 새로 생성하지 않고 메모이제이션된 콜백을 반환한다.

const onCreate = useCallback((author, content, emotion) => {
  const created_date = new Date().getTime();
  const newItem = {
    author,
    content,
    emotion,
    created_date,
    id: dataId.current,
  };
  dataId.current += 1;
  
  // 함수형 업데이트: setData에 값이 아닌 함수를 전달한다.
  setData((data) => [newItem, ...data]);
}, []);

 

useMemo와 차이점

➡️ useMemo는 연산된 결과값을 반환하고, useCallback은 함수를 반환한다.

 

 

 

최적화4 - 프로젝트 최적화 완료

최적화의 시작은 React.memo로 컴포넌트를 묶어주는 것!

import React, { ... } from 'react';

const DiaryItem() => {
  ...
  return (...)
};

export default React.memo(DiaryItem);

 

 

 

 

복잡한 상태변화 로직 분리 - useReducer

dispatch가 호출되면 상태변화가 일어나야 함

import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';
import { useRef, useEffect, useMemo, useCallback, useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INIT': {
      return action.data;
    }
    case 'CREATE': {
      const created_date = new Date().getTime();
      const newItem = { ...action.data, created_date };
      return [newItem, ...state];
    }

    case 'REMOVE': {
      return state.filter((item) => item.id !== action.targetId);
    }

    case 'EDIT': {
      return state.map((item) => (action.targetId === item.id ? { ...item, content: action.newContent } : item));
    }

    default:
      return state;
  }
};

function App() {
  ...
  return (...)
}

export default App;

• reducer 함수: 현재 상태(state)와 액션 객체(action)를 파라미터로 받아 새로운 상태를 반환해주는 함수

 

const [data, dispatch] = useReducer(reducer, []);

• dispatch: 액션을 발생시키는 함수 ex) dispatch({ type: 'REMOVE', targetId });
• data(state): 컴포넌트에서 사용할 수 있는 상태

 

const reducer = (state, action) => {
  ...
};

function App() {
  ...
  const onCreate = useCallback((author, content, emotion) => {
    dispatch({
      type: 'CREATE',
      data: {
        author,
        content,
        emotion,
        id: dataId.current,
      },
    });

    dataId.current += 1;
  }, []);

  const onRemove = useCallback((targetId) => {
    dispatch({ type: 'REMOVE', targetId });
  }, []);

  const onEdit = useCallback((targetId, newContent) => {
    dispatch({ type: 'EDIT', targetId, newContent });
  }, []);


  return (...)
};

export default App;

 

 

 

컴포넌트 트리에 데이터 공급 - Context API

props를 전달만 하는 컴포넌트가 많이 생기면 (Props Drilling) 코드 유지보수가 어려워진다.

Context API를 사용해 컴포넌트 트리 단계마다 명시적으로 props를 넘겨주지 않고 값을 공유할 수 있도록 구현할 수 있다.

• Context 생성

const MyContext = React.createContext(defaultValue);

 

• Context Provider를 통한 데이터 공급

<MyContext.Provider value={전역으로 전달하고자하는 값}>
  // 이 Context안에 위치할 자식 컴포넌트들
</MyContext.Provider>

return (
  <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={memoizedDispatches}>
      <div className="App">
        <DiaryEditor />
        <div>전체 일기: {data.length}</div>
        <div>기분 좋은 일기 개수: {goodCount}</div>
        <div>기분 나쁜 일기 개수: {badCount}</div>
        <div>기분 좋은 일기 비율: {goodRatio}%</div>
        <DiaryList />
      </div>
    </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
  );

 

• 데이터 state가 바뀔 때마다 렌더링되기 때문에 렌더링이 불필요한 값을 굳이 함께 쓰지 않고 새로운 Context를 사용해 분리할 수 있다. (개수 제한 x)

export const DiaryDispatchContext = React.createContext();

const onCreate = useCallback((author, content, emotion) => {
  dispatch({
    type: 'CREATE',
    data: {
      author,
      content,
      emotion,
      id: dataId.current,
    },
  });

  dataId.current += 1;
}, []);

const onRemove = useCallback((targetId) => {
  dispatch({ type: 'REMOVE', targetId });
}, []);

const onEdit = useCallback((targetId, newContent) => {
  dispatch({ type: 'EDIT', targetId, newContent });
}, []);


/* useMemo를 사용하는 이유 */
/* App컴포넌트가 재생성이 될 때, 객체들도 재생성이 되므로 재생성되지 않게 useMemo 객체로 묶어줘야 한다. */
const memoizedDispatches = useMemo(() => {
  return { onCreate, onRemove, onEdit };
}, []);

 

• 사용방법 - useContext()

import React, { useState, useRef, useContext } from 'react';
import { DiaryDispatchContext } from './App';

const DiaryItem = () => {
  ...
  const { onEdit, onRemove } = useContext(DiaryDispatchContext);
  return (...)
};

export default React.memo(DiaryItem);

 

 

 

 

마무리

---

useContext를 마지막으로 간단한 일기장 프로젝트를 마무리했다.

리액트에 대해 어느정도 감이 잡힌 것 같다.

배운 것이 많아서 복습을 철저히 해야겠다.