이노캠6주차(화)-리액트 useRef, useCallback 이란?

1.useRef란?

• javascript에서 특정 Dom을 선택하는 역할 ex) getElementById, querySelector
• 특정 DOM에 접근할 때 사용한다.
• 외부 라이브러리 사용할때 유용하다.
• 원하는 위치에 ref={} 의 형태로 작성하면 된다.
• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성

나는 이걸 todo를 추가할때 id를 늘려가기 위해 사용했다. todo 예시 항목을 3개 설정해놔서 그 다음 4번째부터 id가 하나씩 늘어나도록 만들었다.

 const nextId = useRef(4);
      const onCreate = () => {
          if(title === '' || body === '') {
            alert('Todolist를 입력해주세요.');
            return;
          }

        const todo = {
            id: nextId.current,
            title,
            body,
            isDone:false,
          };
          setTodos(todos.concat(todo));

        setInputs({
            title: '',
            body: ''
          });
    
        nextId.current += 1;
      };

2.useCallback이란?

• 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다.
• 컴포넌트에서 props 가 바뀌지 않았으면 Virtual DOM 에 새로 렌더링하는 것 조차 하지 않고 컴포넌트의 결과물을 재사용 하는 최적화 작업을 하려면, 함수 재사용 필수
• deps 배열에 꼭 포함되야 하는 것: 함수 안에서 사용하는 상태 혹은 props
• 컴포넌트 렌더링 최적화 작업을 해주어야만 성능이 최적화 : useCallback & React.memo

솔직히 사이트의 다른 분들이 정리한 글을 긁어왔다. 어렴풋이 알 것 같은데 확실히 이해하지 못했고 얘를 써보려고 하니 자꾸 오류가 나서 그냥 지워버림... 이거 쓰면 컴포넌트 렌더링 과정에서 도움을 준다는데 내 수준은 그냥 일단 돌아가게 만드는게 더 중요함ㅋㅋㅋ🤦‍♀️🤦‍♀️ 그래서 설명을 잘 해주신 댓글을 가져와서 나중에 보려고 들고 왔다.

참고사이트:18. useCallback 을 사용하여 함수 재사용하기

여기서 useRef에 대해서도 알게 됐는데 설명을 되게 잘 해줘서 좋은 곳이다!

📌 쓰다 만난 오류: 컴포넌트 안에 변수를 안 넣었음

사실 Todolist 만들기를 입문 강의 중반 쯤 듣고 나서 시작했는데 그런 과정에서 이런 오류를 만났다.

그래서 코드를 찬찬히 살펴보는 중 useRef를 쓰는데 실행할 변수로 집어넣지 않아서 생긴 오류라는 걸 발견하고 고쳤다.