[230515] useEffect | useRef | useMemo

⚛️ useEffect

useEffect는 state를 지정하여 해당 state가 변경되었음을 감지하면 함수를 실행(효과)시켜준다.

useEffect(() => {
  // state가 변경되어 렌더링될 때 실행하는 부분
  return() => {
    // 다시 렌더링을 하기 이전에 실행되는 부분
    // clean-up
  }
}, [/*state 값이 들어가는 부분, dependancy array(의존성 배열)*/]) 

상태 변경 -> clean-up 함수 실행 -> useEffect 함수 실행

// 컴포넌트가 업데이트 될 때마다 매번 실행
// ∵ 의존을 안한다, dependancy가 없다
useEffect(() => {
	console.log('hello world');
})

// 처음에만 실행
// ∵ 의존할 상태가 없다
useEffect(() => {
	console.log('hello world');
}, [])

// 변수들의 변화가 일어날 때마다 실행
useEffect(() => {
	console.log('hello world');
}, [변수1, 변수2...])

💡 데이터를 요청할 때, 이벤트를 실행할 때 많이 사용한다.

⚛️ useRef

useRef는 순수 자바스크립트 객체를 생성한다. 값의 접근은 .current로 할 수 있다.

const refContainer = useRef(initialValue);

• 렌더링과 상관없이 값을 변경하고 싶을 때
  다시 렌더링 되어도 그 값은 변하지 않는다. 함수에서 기억하는 것이 아니라 리액트가 기억하는 것이다.
• 컴포넌트의 태그에 직접 접근하고 싶을 때
  useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM에 ref props로 전달해준다. 그러면 Ref 객체의 .current 값은 선택한 DOM을 가르키게 된다.
  데이터, state와 상관없이(리렌더링 하지 않고) 컴포넌트의 DOM을 제어하고 싶을 때 Ref를 사용한다. ex. 포커스

💡 Ref 객체의 값의 변경은 리렌더링을 발생시키지 않는다.
💡 Ref는 남용하지 않는다. 먼저 Ref를 사용하지 않고도 다른 기능을 사용하여서 구현할 수 있는지 고려한 후 사용한다. 계속 남아있기 때문에 메모리 낭비가 될 수 있다.
💡 querySelector나 getElementById를 사용하는 것은 리액트에서 원하는 형태랑 어긋난다. 리액트는 모든 DOM 관리를 리액트에게 맡겼으면 한다. 따라서 useRef는 DOM 조작이 필요할 때 사용한다.

⚛️ useMemo

useMemo는 state가 있는 컴포넌트에 state 변화가 생기면 재평가 후 새로 렌더링한다.

Memo는 컴포넌트 성능 최적화에 사용된다. memoization 기법을 사용한다. 어떤 부하가 생기는 함수를 반복해서 작업할 때 기억해두었다가 사용하는 기법을 말한다. 렌더링이 될 때 이전에 작업해두었던 결과값을 가지고 있다가 반영해주는 것이다.

const 저장할_변수 = useMemo(() => {
	return 부하가_생기는_함수();
}, [state_값])

💡 setState 함수 무한루프 에러
"Too many re-renders. React limits the number of renders to prevent an infinite loop."

const [num, setNum] = useState(0);
setNum(num+1);

💡 (무거운) 함수가 렌더링될 때마다 실행되지 않도록, 필요할 때만 실행하고 싶을 때 사용한다.