기능은 다 구현 되었다 :)
https://sseung-simple-diary.web.app/
(기본기능 연습 프로젝트여서 로컬스토리지는 사용하지않았다)
상태변화가 필요없는 컴포넌트도 계속 상태가 변화가 생기는것을 방지하는 컴포넌트 최적화, 상태변화 로직을 분리하고 계속해서 스테이트가 새로운 데이터를 유지할 수 있도록 사용하면 더 좋은 구현이 된다고 한다
이부분은 리액트 시작한지 얼마 안된 나에게는 너무 어렵게 느껴져서 더 공부해야할 듯 싶다
(이해가 될 때쯤 글이 수정가능하지 않을까 싶은....)
1. 컴포넌트 최적화
useMemo : 재렌더할 때 값이 동일하다면 재사용
useCallback : useMemo와 비슷하지만 함수동작이 동일하다면 재사용
React.memo : 업데이트조건(의존성)에 맞거나, 본인 스테이트 변경시에만 재렌더 되게해주는 컴포넌트로 반환
- 새로운 아이템 생성
=> DiaryEditor의 props로 보내주는 onCreate를useCallback으로 최적화 - 기존 아이템 수정
=> DiaryItem의 props로 보내주는 onRemove, onEdit을useCallback으로 최적화 - 상태변화하는 props를 가져오는 DiaryEditor컴포넌트, DiaryItem컴포넌트를
React.memo()로 최적화
App컴포넌트에서 data를 가져다 써야하기 때문에 코드가 길어져서 무거워짐
=> useReducer를 사용하여 상태변화 로직을 컴포넌트 밖으로 로직 분리
2. useReducer
data를 관리하는 useState를 useReducer로 변경
컴포넌트 외부로 상태관리를 분리하여 사용하고, useCallback 사용 시 뎁스(의존성)가 없어도 데이터를 최신데이터로 유지할 수 있다.
3. useContext
- 부모 컴포넌트에 있는 데이터들을 A자식의 컴포넌트 안의 A-1자식 컴포넌트에 props를 전달하기 위해 A자식한테도 props를 전달했었다.
=> 이것을 드릴링이라고 하는데, useContext를 사용하면 부모가 A-1자식한테 data를 바로 줄 수 있다. - 만들어줄 useContext : 전체 데이터에 대한 useContext , 리렌더를 일으키지 않도록 최적화해준 데이터에 대한 useContext
export const DiaryStateContext = React.createContext()
export const DiaryDispatchContext = React.createContext()
return (
<DiaryStateContext.Provider value={data}>
<DiaryDispatchContext.Provider value={memoizedDispatches}>
<div className="App">
<DiaryEditor />
<DiaryList />
</div>
</DiaryDispatchContext.Provider>
</DiaryStateContext.Provider>
);=> 생성한 context로 context value를 사용할 dom을 감싸준다
=> export를 통해 다른파일에서 import하여 value를 props처럼 사용 가능
import { DiaryDispatchContext } from "./App"
const {onRemove, onEdit} = useContext(DiaryDispatchContext)
Front-end