말처럼 useEffect, useMemo, useCallback 사용하고 난 후 느낀점
음...리액트 class
방식에서 hook
방식으로 넘어오면서 많은 어려움이 있었다.
특히 didMount
와 didUpdate
는 너무나도 편리하게 사용을 했었었다.
개인적인 생각으로 didMount
와 didUpdate
가 있어서 많은 편리함이 있어서 hooks
에서 지원을 했으면 좋겟다라는 생각을 하긴한다.
물론 지원을 해주는 패키지? 같은게 있긴하다. 필요하다면 찾아서 올려보도록 하겠다.
무튼 쉽게 내가 쓰면서 기억을 해두려고 메모를 해보려고 한다.
- 배치 순서
useRef
useContext
useState
작업 함수들
useMemo
useCallback
useEffect
return JSX
개발할 때는 위 순으로 배치를 하는 중이다.
실제로 사용을 하다보니 useEffect
가 하순에 있는게, 가장 좋다고 생각을 한다.
useEffect
가 상단에 있으면 아래에 있는 변수값을들 감지를 못하는 경우들이 종종 보였다.
(이 부분은 정확하진 않지만 좀 괜찮은 예제를 만들어보고 싶긴한다.)
- 참고
useState
변수 선언
그냥 변수 선언이라고 생각하자
useMemo
함수의 리턴 값 감지
특정 함수에서 나오는 값이나, 특정 변수들의 값을 감지한다고 생각하면 된다.
useCallback
함수의 레퍼런스 감지
디펜던시의 값이 변화하면 함수를 새로 생성한다? 라고 생각하면 된다.
문제의 콜백
이건 나중에 예를 들어서 정리를하면 좀 더 이해가 잘 될 것같다.
useEffect
렌더링 디펜던시로 감지하여 componentDidMount
와 componentDidUpdate
의 역할을 함.
- 주의사항
개발을 하다보니 useEffect 내부에서 setState를 이용해서 값을 넣어주는 경우가 있다.
아래의 코드를 보면 알겠지만 저렇게 코드를 짜면 답없다.
const [test, setTest] = useState('');
useEffect(() => {
setTest('1');
},[test]);
순서를 보면 테스트 변수가 변화한다. -> useEffect가 감지하고 setTest에 1를 넣어준다. -> useEffect가 감지된다 -> 개판으로 무한로딩이 된다.
이런식으로 무한랜더링이 되는 부분들이 보여진다.
스스로 개발하면서 hook에 디펜던시를 넣을 때 고민을 해야겠다.
근데 확실히 개발하다보니, customHook를 만들어쓰니까 편하긴하네.
귀찮아서 오늘은 대충 기록해야겠다.
'xersuy > 개발관련 끄적' 카테고리의 다른 글
useEffect, useMemo, useCallback 사용 후기 (0) | 2021.02.26 |
---|
댓글0