(TIL 45일차) useEffect 및 Eslint 자동적용 문제 (소켓 통신)

빡기·2020년 3월 18일

componentDidMount elint useEffect useState 의존 컴포넌트

TIL(Today I Learned)

목록 보기

41/43

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]