All 12 useState & useEffect Mistakes Junior React Developers Still Make in 2023

https://www.youtube.com/watch?v=-yIsQPp31L0

주니어 개발자가 주로 실수하는 12가지를 알려주는데

모르던 부분이 있어서 기록을 남긴다.

 

const handleChange = (e) => {
  setUser((prev) => {
    return { ...prev, name: e.target.value };
  });
};

이런식으로 이전 값을 prev로 받아서 업데이트를 할 수 있는데

이는 순서대로 작동시키는 부분이 있을 때 사용한다.

즉 함수형 업데이트는 state가 비동기적으로 업데이트될 때, 최신 상태를 기반으로 업데이트를 한다.

setState 안에 함수를 써본 적이 없었는데, 하나를 배웠다.

또한

 

useEffect의 조건 [] 부분에는

변수 안에 변수까지 적을 것.

price.number같이 세세한 조건으로 설정.

 

const [num, setNum] = useState(1)

이런 식이면 알아서 number로 인식을 하기 때문에

const [num, setNum] = useState<number>(1) 이런식으로 붙여줄 필요가 없다.

 

fetch를 useEffect안에 넣을 때는

const controller = new AbortController();를 useEffect 안에 넣고

return() => controller.abort() 를 넣어준다.

그리고 어떤 버튼을 누를 때 id값이 바뀌면서 data를 fetch한다고 하면

[id]를 useEffect 끝에 넣어줌으로서

버튼을 누를 때마다 abort가 진행되어, 기존의 useEffect가 실행되고 있던 것을 날려주도록 한다.