리액트 공부

#useReducer
- 컴포넌트 내부에 새로운 State를 생성하는 React Hook
- 모든 useState는 useReducer로 대체 가능
- 상태 관리 코드를 컴포넌트 외부로 분리할 수 있음

 

 

 

#최적화
- 웹 서비스의 성능을 개선하는 모든 행위를 일컫음
- 아주 단순한 것부터 아주 어려운 방법까지 매우 다양함

일반적인 웹 서비스 최적화 방법
- 서버의 응답속도 개선
- 이미지, 폰트, 코드 파일 등의 정적 파일 로딩 개선
- 불필요한 네트워크 요청 줄임
- ...

React App 내부의 최적화 방법
- 컴포넌트 내부의 불 필요한 연산 방지
- 컴포넌트 내부의 불 필요한 함수 재생성 방지
- 컴포넌트의 불 필요한 리렌더링 방지

 

 

 

 

 

#useMemo
- "메모이제이션" 기법을 기반으로 불 필요한 연산을 최적화 하는 리액트 훅
- 자매품 : useCallback

 

 

 

 

 

React.memo
- 컴포넌트를 위수로 받아, 최적화된 컴포넌트로 만들어 변환
- 부모 컴포넌트가 리렌더링 되더라구도 해당 컴포넌트 props가 바뀌지 않는 한 리렌더링 되지 않도록 memoization됨

 

```
// 고차 컴포넌트(HOC)

export default memo(TodoItem, (prevProps, nextProps) => {

  // 반환값에 따라, Props가 바뀌었는지 안 바뀌었는지 판단

  // T -> Props 바뀌지 않음 -> 리렌더링 X

  // F -> Props 바뀜 -> 리렌더링 O

  

  if (prevProps.id !== nextProps.id) return false;

  if (prevProps.isDone !== nextProps.isDone) return false;

  if (prevProps.content !== nextProps.content) return false;

  if (prevProps.date !== nextProps.date) return false;

  

  return true;

});
```

 

https://patterns-dev-kr.github.io/design-patterns/hoc-pattern/
https://goongoguma.github.io/2021/04/26/When-to-useMemo-and-useCallback/

When to useMemo and useCallback (번역)

 

HOC 패턴

 

 

 

 

 

 

 

 

return state.map((item) => { item.id === action.targetId ? { ...item, isDone: !item.isDone } : item; }); 

return state.map((item) => item.id === action.targetId ? { ...item, isDone: !item.isDone } : item ); 차이가 뭐길래 에러가 나는거야

두 코드의 가장 큰 차이는 **`map` 함수의 콜백 함수에서 반환값이 명시적으로 정의되었는지 여부**입니다. 에러가 나는 원인은 첫 번째 코드에서 콜백 함수 내에 **암묵적인 반환값이 없기 때문**입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

#React Context
- 컴포넌트간의 데이터를 전달하는 또 다른 방법
- 기존 Props가 가지고 있던 단점을 해결할 수 있음
- Props Drilling 해결
- 데이터 보관소 객체