useEffect 안에서 useState 사용 시 문제점
처음에 클래스형의 ComponentDidmount 처럼 useEffect를 사용하기 위해 두 번째 매개변수로 빈 배열을 주면 된다는 것을 알았지만 Eslint 자동 저장 때문에 배열안에 자동으로 변수를 기입하여 변수를 의존하게 만들었다.
const [msg, setMsg] = useState("");
const [arr, setArr] = useState([]);
useEffect(() => {
socket.on("update message", obj => {
setArr(res);
// res값을 받아서 setRes로 변경하는 의도지만 아래 배열안에 자꾸 res가 자동으로 기입
});
bottom.current.scrollTo({ top: bottom.current.scrollHeight });
}, [res]);
1. 이펙트가 자급자족 하도록 만들기
const [msg, setMsg] = useState("");
const [arr, setRes] = useState([]);
useEffect(() => {
socket.on("update message", obj => {
setArr(prev => [...prev, obj]);
// res값을 받아서 setRes로 변경하는 의도지만 아래 배열안에 자꾸 res가 자동으로 기입
});
bottom.current.scrollTo({ top: bottom.current.scrollHeight });
}, [res]);
- 이전 상태를 기준으로 상태 값을 업데이트 하고 싶을 때는, setState 에 함수 형태의 업데이터를 사용하면 된다는 것을 알았다!!!
- 의존성을 제거하지 않고도 실제로 문제를 해결!!!(편법이 아닌 올바른 방법)
- 이펙트는 더 이상 랜더링 스코프에서 count 값을 읽어 들이지 않습니다.
- res 는 우리가 setArr(res) 이라고 썼기 때문에 이펙트 안에서 필요한 의존성이었지만, 진짜로 우리는 res를 arr안에 불변성을 유지한 상태로 추가하고 돌려주는 것을 원한 것 뿐이다.
=> 한 마디로 res를 [] 안에 추가하여 의존성을 부여하고 싶지 않았을 뿐이다이러한 경우 함수 형태의 업데이터를 사용하면 된다 (최신 방법)
prev => [...prev, obj]
2. Eslint 자동 저장 강제로 해제
- 위의 사진 처럼 강제로 자동 입력 되는 부분을 비워 놓으면 아이콘이 뜨는데 누르고 Disable을 적용 시켜주면 빈배열인 상태로 적용 할 수 있다.
- https://rinae.dev/posts/a-complete-guide-to-useeffect-ko
useEffect 참고 사이트
Front End. Dev