[React] 컴포넌트 렌더링 이후 effect 수행하기

 데이터를 다 받아서 분류해서 css에 적용 시키는 작업을 많이 한다 예를 들어서 useEffect로 dispatch로 요청을 해 db에서 받아 온 값을 리덕스에 저장하고 컴포넌트에 useSelector로 받아와서 데이터 값에 특정 string이 있으면 버튼 색상를 업데이트하는 함수를 작성했다 하지만 바로바로 적용이 안되고 스크립트로 코드를 건드렸을때만 적용이 되는거다. 함수에서부터 받아온 값에서부터 상위컴포넌트로 하나씩 받아온 값을 console.log로 디버깅 해 본 결과 데이터가 다 렌더링 되기 전에 함수가 실행된걸 확인 했다. 렌더링에 문제라는걸 확인하고 컴포넌트에 렌더링을 관리하는 리엑트에서 제공되는react hook 중에 useEffect로 특정 값을 받아 왔을때만 실행되게 작업 함 잘 정리 된 글이 있어 가져와 봤다.

 

1. 렌더링 후의 동작

• 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 정의
  • 리액트는 브라우저가 다 그려질 때까지 useEffect의 실행을 지연한다.

• 렌더링 후의 부가적인 effect
  • side effect : any work outside of the component
  • 외부 데이터 가져오기, 수동으로 리액트 컴포넌트 DOM 수정 등

• effect를 발생하는 콜백함수와, dependency 배열을 인자로 받는다.

Dependency Array 인자

• 의존성 배열 인자에는 effect 함수가 의존하는 변수를 배열로 작성한다.
  • 해당 변수가 업데이트 될 때 effect 실행

• 작성법에 따라 성능 최적화와 관련이 있다.

1. 작성하지 않으면, default로 컴포넌트가 re-render될때마다 effect를 수행한다.
2. 변수가 담긴 배열을 작성하면, 해당 배열의 값들이 변할 때만 effect가 수행된다.
3. 빈 배열을 작성하면, 처음 렌더링 후에만 effect가 수행된다.
   - prop이나 state에 의존하지 않으므로 재실행되어야 할 필요가 없음을 명시하는 것

 // 모든 리렌더링마다 로그가 찍힘
  useEffect(() => {
    console.log("call useEffect after every re-render");
  }); 

 // value 변수 값이 변할 때만 로그가 찍힘
  useEffect(() => {
    console.log("call useEffect when value changes");
  }, [value]);

 // 첫 렌더링 후에만 로그가 찍힘.
  useEffect(() => {
    console.log("call useEffect only after initial render");
  }, []); 

 

 

참고 블로그 - https://velog.io/@swimme/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%ED%9B%84-effect-useEffect

[React] 컴포넌트 렌더링 이후 effect 수행 - useEffect