11/8 학습

렌더링 시 useEffect실행 막기

초기 렌더링 시 useEffect에 의해 콘솔에 출력된 모습

//state가 렌더링 될 때도 실행된다.
  useEffect(() => {
    console.log("글자 입력");
  }, [state])

첫 번째 렌더링과, 이후의 모든 업데이트에서 useEffect함수가 실행된다.

---

useRef hook 활용

• current 프로퍼티를 가지고있는 객체를 반환
• current 프로퍼티는 다시 렌더링되더라도 유지된다.
• 리엑트에서 DOM에 접근하는데 사용할 수 있다.
  

  초기 렌더링 시 useEffect함수가 실행되지 않는다.

//렌더링 시 useEffect 실행 막기
let isRendered = useRef(false);
  useEffect(() => {
    if(isRendered.current){
      console.log("글자 입력");
    } else {
      isRendered.current = true;
    }
    
  }, [state])

출처
https://ko.reactjs.org/docs/hooks-reference.html#useref