useRef

랜더링을 안 해도 되는 곳에 주로 사용.

특정 Dom을 select하여 사용 및 update를 할 수 있다.

외부 라이브러리를 사용할 때도 유요하며, 원하는 위치에 ref={} 형태로 작성하여 사용 가능.

const nameInput = useRef();

const onClick = () => {
    nameInput.current.focus();
}

return(
    <input ref={nameInput} />
    <button onClick={onClick}>클릭</button>
)

Ref의 값이냐 상태를 변경하고 싶을 때는 current를 사용하면 된다.

딱히 랜더링이 필요하지 않을 때 사용하면 더 효율적이다.

useEffect

state나 props가 변경될 때마다 다시 불러온다.
하지만 두번째 인자에 []을 넣어주면 처음에만 불러온다.
[]에 원하는 데이터가 바뀔 때만 변경을 원하면 두 번째 인자에 [count] 이런 식으로 넣어주면 된다.

useEffect(() => {
    console.log(`mounted & updated!: ${count}`);
  }, []); //state나 props가 변경될 때마다 불러옴. 하지만 두번째 인자에 []을 넣어주면 처음에만 불러옴. []에 count를 넣어준다면 count가 변경될 때만 불러온다. 즉, 원하는 데이터가 바뀔 때만 변경을 원하면 두번째 인자에 배열에 넣어주면 된다.

useEffect는 렌더링 혹은 변수의 값, 혹은 오브젝트가 달라지게 됨녀 그것을 인지하고 업데이트를 해주는 함수입니다.

useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있습니다.

useEffect는 인자로 두 개를 받을 수 있습니다.
첫 번째 인자는 무조건 있어야 하는 것이며 함수가 들어와야 하고, 두 번째 인자는 Dependency가 들어오는데, 이것은 옵션입니다.

useEffect의 사용법을 세 가지로 나눠서 예를 들어서 설명을 드리자면 첫 번째 경우는 첫 번째 인자인 함수만 들어오는 경입니다.

잘 쓰이지 않는 방법인데, 이유는 Dependency가 없기 때문에 렌더링을 할 때 한번, 그리고 어떠한 작은 요소라도 변화한다면 다시 useEffect가 발동이 되어서 불필요한 실행이 너무 많아집니다.

두 번째는 두 번째 인자로 대괄호만 들어오는 경우인데, 이것은 렌더링 후에 단 한 번만 실행하고 싶을 때 사용하는 방법입니다.
만약 이렇게 대괄호만 넣게 되면 렌더링 후 단 한 번만 실행되고 다시는 실행되지 않습니다.

세 번째는 두 번째 대괄호 안해 특정한 변수 혹은 오브젝트가 들어올 때인데, 만약 이렇게 해서 만든다면 두 번째 인자로 대괄호 안에 들어온 안에 변수 혹은 오브젝트가 값이 변한다면 실행이 됩니다.

useCallback

useCallback 함수는 보통 React.memo와 많이 사용하지만, 그렇지 않아도 상관은 없다.

useCallback은 useMemo와 비슷한 hook이다.
useMemo는 특정 결과값을 재사용할 때 사용하지만, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.

쉽게 설명하자면 컴포넌트가 리렌더링될 때마다 함수를 새로 만드는 것이 아니라, 한 번 함수를 만들고 재사용할 수 있도록 사용하는 것이다.

const onChange = useCallback(e => {
setValue(e.target.value)
}, []);

두 번째 인자에는 useEffect와 마찬가지로 변화하는 것을 감지할 값들을 넣어주어야 한다.

 const nextId = useRef(4);
  const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  }, [users, username, email]);

만약 넣지 않는다면 가장 최신 값을 참조할 것이라고 보장할 수 없다.

만약 React.memo를 사용하여 적용할 경우, 최적화를 위해서는 React.memo와 함께 함수형 업데이트를 사용하는 것이 좋다.

중요한 건, 불피요한 리렌더링이 발생하는지를 정확히 체크하여 그 때만 사용할 것이며, 또한 업데이트가 자주 발생하지 않거나 내부 데이터가 100개 이상은 되지 않는 등의 경우에는 이런 최적화 작업을 반드시 해 줄 필요는 없다.

참조: https://react.vlpt.us/basic/19-React.memo.html
복습할 때 다시 보기