말처럼 useEffect, useMemo, useCallback 사용하고 난 후 느낀점

음...리액트 class 방식에서 hook 방식으로 넘어오면서 많은 어려움이 있었다.

특히 didMount 와 didUpdate는 너무나도 편리하게 사용을 했었었다.

개인적인 생각으로 didMount 와 didUpdate가 있어서 많은 편리함이 있어서 hooks에서 지원을 했으면 좋겟다라는 생각을 하긴한다.

물론 지원을 해주는 패키지? 같은게 있긴하다. 필요하다면 찾아서 올려보도록 하겠다.

무튼 쉽게 내가 쓰면서 기억을 해두려고 메모를 해보려고 한다.

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를 만들어쓰니까 편하긴하네.

귀찮아서 오늘은 대충 기록해야겠다.

useEffect, useMemo, useCallback 사용 후기 (0)	2021.02.26

useEffect, useMemo, useCallback 사용 후기