230406 프리온보딩 - 리액트 memoization

***
useState 권장 사용 예시
Position = {x:1, y:1}
const [position, setPosition] = useState({x:0,y:0})


***
Automatic Batching
함수 내에서 setCount를 세 번 실행하더라도 한 번에 실행된다.
setCount(count+1);
setCount(count+1);
setCount(count+1);
=> count+1 한 번만 실행된 것과 같은 결과

원하는 결과를 얻기 위한 형태는 다음과 같다.
setCount((prevCount) => preveCount+1);
setCount((prevCount) => preveCount+1);
setCount((prevCount) => preveCount+1);
=> prevCount+1+1+1 세 번 더해진 결과


***
useReducer 효율적으로 사용하기 위한 예제 공부하기 
switch, case, => update state.parameter ( ex) product업데이트, category업데이트)
https://github.com/sendbird

***
리액트에서는 1ms를 초과하는 계산이면 expensive로 간주
memoization이 더 좋은 경우는 거의 없음(필요한 경우에만 측정을 하여 결과에 따라서 적용)

useMemo 함수의 결과 cache, memoization을 하는 것이 좋은지 좋지 않은지 판단 기준
최초 렌더링은 오래 걸린다
리렌더링은 cache된 데이터를 이용하여 빨라진다
시간복잡도 n>100 일 때만 심하게 유리하다

useCallback: 복잡한 함수일 때, child 넘겨줄 때
onClick event같은 경우 컴포넌트 값이 변화가 없어도 event로 인해 리렌더링되는 것을 막아준다
역시 expensive일 경우에만 유리하다


***
기본적으로 부모컴포넌트에 있는 값을 자식컴포넌트에서 변경시키는 것은 좋지 않음
=> 부모에서 자식으로 값을 전달하고, 자식에서 부모의 값을 변경하면 부모까지 전부 다 리렌더링 되므로 매우 비효율적

 

리덕스의 useSelector 훅을 사용하여 상태를 조회하는 컴포넌트는 해당 상태가 변경될 때만 리렌더링
상태를 수정하는 경우 useSelector를 사용하여 해당 상태를 구독하고 있는 컴포넌트들 중에서 상태가 변경된 컴포넌트만 리렌더링 

 

=> 따라서, 간단한 컴포넌트는 state 직접 전달하고, 전역으로 쓰이거나 3회 이상 drilling하는 경우에는 reducer를 이용

***
디바운스 대신 useDefferedValue를 쓰면 되는가?
완벽히 대체를 할 수는 없다.


***
useLayoutEffect가 우선 작동하고
useEffect가 후순위로 작동
어떤 state의 조건에 따라서 useEffect를 통해 해당 상태를 업데이트하는데,

그 작업으로 인해서 화면이 한번 더 repaint가 되어야한다면 layouteffect를 사용
layoutEffect가 무엇인지 추가로 알아보기


***
ref는 기억하면 좋은 값 +

렌더링이 필요 없는 값에 사용 ( ex) 음성 데이터 같은 경우 렌더링이 필요 없지만 expensive하므로 ref에 저장하여 이용)


***
Context API 단점
비즈니스 로직에 따라 Provider를 생성해야 해서 코드가 복잡해짐
context범위에 있는 컴포넌트 전부 다 렌더링 시켜서 렌더링 효율에 좋지 않음

***
Redux 
dispatch를 통해서만 상태를 업데이트 할 수 있음
장점
Redux DevTools 등을 활용하여 debugging 쉬움
middleware: saga, thunk

saga, thunk 추가로 알아보기

단점
구조가 복잡함(처음 써보는 사람은 협업이 어려움)
사이즈가 작을경우 불필요한 overhead

***
Recoil
장점
hook이랑 닮아서 쓰기에는 편하나

단점
사용자 짱 적음

***
비동기 호출 결과를 dependency에 쓴다면 useMemo를 사용

***

입사할 때 고려사항: 사수는 없을 수도 있지만 동료는 없으면 절대 가지 말자

*** 

연봉협상 팁
=> 무엇이든 증명을 할 수 있도록 자주 기록을 하라

***
아토믹 디자인 패턴이 현재로서는 최선의 디자인 패턴

아토믹 디자인 패턴 알아보기

***
면접준비에 도움이 되는 것: 리액트 공식 문서 쭉 읽어 보기

***
커리어리 강병진님 질문하기

***
OOP로 꼭 뭐를 만들라는 얘기가 아니라 
OOP원칙을 지키는 개발을 하라