[React] 훅(Hooks)

📖리다기, 공식문서, 노마드 코더, 제로초님의 영상을 보고 제가 이해한 내용을 바탕으로 정리한 글입니다.📖

리다기에서 8장에 훅에 대한 설명이 나온다. 예제를 따라하면서 해보았지만 8장까지 휘뚜루마뚜루 달려서 그런가 뇌에 과부화가 와서 머리가 받아들이기를 거부를 하는 것 같았다.

하지만, 8장까지 했을때 이 부분이 비중이 있고 중요하다고 느껴졌기 때문에 하루 쉬고 하루 다시 날 잡아서 공식문서와 책, 영상을 가리지 않고 찾아본 결과 어느 정도? 조금은? 이해를 할 수 있었다.😥

우선 제일 중요한 포인트는 개념을 어느 정도 이해를 하고 예제를 다시 해보는것!이 이해를 하는 데 많은 도움이 됐다.

또, 노마드 코더님의 영상과 제로초님의 훅에 대한 영상이 도움이 많이 됐다.

---

훅은 함수형 컴포넌트에서 state를 가질 수 있게 해주는 중요한 요소이다.

그렇기에 여러 함수들이 존재하는데 이러한 함수들을 쓰는 순서가 매우 중요하다!

일단 내가 정리한 함수들은 아래와 같다.

 

• useState
• useEffect
• useRef
• useMemo
• useCallback

 

useState

import React, {useState} from 'react';

const [value, setValue] = useState(0);
//value의 초깃값을 0으로 설정
<button onClick ={() => setValue(value+1)}>+1</button>
//이런식으로 return 안에 넣어주게 되면 +1이라고 쓰여있는 버튼을 누르면 value의 값이 1씩 올라감

 

useState는 화면 렌더링과 데이터를 저장하는 공간

useState도 그렇고 나머지 훅을 사용할 때는 꼭! 맨 윗 줄에 import React, {사용하는 훅} from 'react';를 적어줘야한다.

useState를 이용해서 기본값은 0으로 설정하고, [value, setValue]라는 배열을 설정했다.

이 배열은 [상태값, 상태를 설정하는 함수]이다.

이렇게 함수형 컴포넌트에서도 상태 관리를 할 수 있게 됐기 때문에 상태관리때문에 굳이 클래스형을 쓰지 않아도 된다.

나는 아직 확실하지는 않지만, 함수형이 클래스형보다 편한것 같다. 왜냐하면, 클래스형처럼 this를 쓰지 않아도 되기 때문,,

 

useEffect

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount 이렇게 세가지를 합친거라고 볼 수 있다.

원래 보통 componentDidMount, componentDidUpdate을 합친거로 봐도 무방하다고 하지만 useEffect의 두번째 요소에 빈 배열[]을 넣게 되면 componentWillUnmount의 역할을 할 수 있는거 아닌가?

useEffect는 두개의 인자가 필요하다.

useEffect(effect:React.EffectCallback, deps)이렇게 구성이 되어있다.

이는 두 개의 인자가 필요한데, 첫번째는 function으로서의 effect함수를 넣는 것이고, 두번째 인자로는 dependencies를 넣는 것이다.

deps가 존재한다면, deps부분의 리스트에 있는 값일 때만 값이 변하도록 활성화!

 

useEffect(() => {
	console.log(name);
},[name]);

//name의 값이 변할때만 콘솔에 name을 출력

 

useRef

지금까지 리액트를 공부하면서 라이프사이클과 훅을 가장 받아들이기가 어려웠다.

그래서 이런저런 정리되어있는 자료들을 찾아보면서 내 것으로 만들려고 많이 노력해봤다.

제로초님이 useRef를 정리해놓은 자료를 참고해보았다.

www.zerocho.com/category/React/post/5f9a7c8807be1d0004347311 

 

useRef는 자바스크립트 문법에서 GetElementById()와 동일하다고 할 수 있다.

useRef는 어떨때 사용하면 좋을까?

• 화면 리렌더링과는 관련없는 데이터를 저장
• 특정 DOM을 선택할 수 있게끔 하는 기능
  예) 엘리먼트의 크기 가져오기, 스크롤바 위치 가져오기, 포커스 설정

useRef로 생성한 데이터는 리렌더링과 상관이 없다.

 

const Ref_ex = () =>{
	const inputF = useRef(null); //초기값은 생성할때 인수로 작성해주면 됨
    ///////
    const onChange = useCallback(e=> {
    	inputF.current.focus();//이 줄은 인풋창에 계속 포컷스가 넘어가도록!
    }
    ///////
    return(
    	<>
        	<input ref={input}/>
        </>
    )
}

 

이렇게 코드를 작성하게 되면(중간중간 코드들은 다 생략했으니까 감안하고 봐주세영),useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.

여기서 특이한 점은 inputF의 값을 가져올 때, current로 접근해야하는 것이다. current 속성을 사용해서 접근하도록 하라고 한다.

엥 도대체 왜? 프로퍼티 값을 받아와야하기 때문이다!

리액트 공식문서에서 캡쳐해옴

current를 통해 프로퍼티 값을 받아야하기 때문에 사용하는데, 밑에 굵은 글자로 써져있는거는 hook을 통해서 해결된 부분이다!

 

useMemo

useMemo는 값을 기억하는 훅이다.

useMemo와 useRef와 useCallback의 차이점은 무엇일까?

useCallback는 함수 자체를 캐싱하고, useMemo는 복잡한 함수 결과값을 기억하고, useRef는 일반값을 기억한다.

 

const LottoNums = useMemo(()=>getWinNumbers, []);

 

만약 코드가 이렇게 작성된다면, getWinNumbers()함수를 통해 나온 리턴값이 []배열에 기억되는 것이다.

 

useCallback

함수를 기억해줘서 함수생성시간을 줄여주는 것

 

useCallback(() => {},[]);
useMemo(() => 값, []);

 

둘 다 함수를 첫번째 인자로, 두번째는 deps배열을 받는다.

하지만, useCallback은 ()=>{} 자체를 기억하는거고, useMemo는 값을 기억하는 거다.

deps 안의 값이 바뀔 때마다 새로 실행된다.

주의사항

🤔왜 함수마다 사용하지 않지?

기억을 너무 잘하기 때문에 몇번이고 렌더링해도 첫 값을 기억

 

자식 컴포넌트에 함수로 props를 넘길때 useCallback 필수!!

예를 들어, onClick={onClickRedo} 이런 코드가 쓰일 때, 자식이 쓸데없이 리렌더링 되지 않도록 만들어준다.

 

---

 

나름 그래도 포스트를 쓰면서 정리해보니 머릿 속이 조금 정리된 것 같다.

그래도, 이 훅을 적재적소에 사용하기 위해서는 계속 사용해보고 공부해야될 것 같다.

하면 할수록 공부할 게 늘어나는 것 같아서 너무,,,,좋,,,,다,,,,^^🤨