리액트 hooks 정리(State, Effect, Context, Ref, Memo, Callback)

윤도훈·2024년 9월 19일

useState()

우리의 효자 useState.
이친구는 내가 본 변수중에 제일 저장하기 좋은 변수입니다. count에 변수를 저장해뒀다가 setCount로 count의 수를 바꿔줍니다.
그러면 엥? 그냥 count = 1, count++ 해주면 더 간편한거 아닌가? 싶지만 노노노

화면에있는 값까지 같이 렌더링시켜주면서 변수의 값을바꿔주기 때문에 좋다 이말이야

useEffect()

의존성배열을 활용하여 useEffect 사용하기

컴포넌트가 렌더링될때만 함수를 실행시키고싶다면 useEffect를 써야합니다.(의존성배열은 빈배열이 됨)
또한 조건이 충족될때 렌더링 되게하고싶다면 useEffect를 사용해줍니다.

useContext()

우리는 보통 다른 컴포넌트로 데이터를 보낼때 props를 사용합니다.
하지만 데이터를 사용하지 않는 컴포넌트 또한 props로 받아야 필요한 다른 컴포넌트로 전달할 수 있습니다. 이런 번거로움을 해결하고자 useContext()를 사용해줍니다.

사용방법

createContext로 Context를 만들어 준 후

데이터를 담아 호출해줍니다.

이렇게 불러와서 사용할 수 있습니다.

useRef

useRef 의 기능으로는 두가지가있습니다.

첫번째 저장공간으로서의 기능입니다.

자주 바뀌는 값을 state 로 설정해둔다면 바뀔때마다 렌더링 되므로 비효율적입니다. 그렇기에 자주바뀌지 않는값을 Ref로 지정해둡니다.

어? 근데 이러면 그냥 let 쓰면 되는거 아니에요? 할 수 도 있지만 let변수를 선언하고 state를 이용해서 렌더링 시킨다면 let변수는 다시 0으로 초기화
되어서 사용할 수 가 없습니다.

사용방법

Ref는 오브젝트형식으로 값을 저장해줍니다. 값을 current에 담을 수 있으며 불러올때 또한 current를 이용해 줍니다.

두번째 돔요소 조정으로서의 기능입니다.

돔요소를 Ref 변수에 담을수도 있습니다!

사용방법

예제 : 렌더링됐을때 인풋박스로 포커스해두기

돔 요소에 ref 속성을 추가하여 Ref변수를 넣어줍니다. 그렇다면 Ref의 current에 돔요소가 담기게됩니다.
요소의 value와 focus등등을 이용하여 기능을 만들수도 있습니다!

useMemo

useMemo는 값을 지정해서 메모리에 저장시켜주는 훅입니다.
useEffect의 상위호환같은 느낌???
useMemo는 값의 메모이제이션을 위해 사용됩니다.
내가 이 state가 변할때 얘는 실행안시키고 다른 함수만 실행시키고 싶은데...싶을때 딱좋은 친구
*메모제이션 : 메모리에 저장시켜뒀다가 써먹는 그거 맞음 ㅇㅇ

사용방법

10000을 더해주는 함수와 1을 더해주는 함수입니다. 10000을 더해주는 함수는 for문이 돌아서 오지게 느립니다. state가 바껴서 렌더링될때마다 이런 함수를 계속 실행시켜주면 큰일나겠죠?

그래서 useMemo를 이용하여 state인 hardNum이 바뀔때만 hardSumf() 가 실행되도록 하였습니다.

이러면 그냥 useEffect 쓰는거랑 뭐가다르냐 하실 수 있지만 hardNum이 object라고 생각해봅시다.

hardNum에는 주소가 들어간다는거 알고계시죠? 네, 그때 useEffect를 쓴다면 hardNum에 들어있는 주소는 바뀌지 않기 때문에 아무리 object안에 값 이 변해도 인식을 못한다~ 이말이야 하지만 우리의 useMemo 는 그런것까지 다 인식해준다 이말이야^^

useCallback

useCallback은 useMemo와 비슷하게 컴퓨터 메모리에 저장시켜주는 훅 입니다.
그렇기 때문에 꼭 렌더링될때 함수가 새로 생성되지 않도록해주는 훅입니다.
주로 자식 컴포넌트에 콜백 함수를 전달할 때, 불필요한 렌더링을 막기 위해 사용됩니다.

사용방법

다음과같은 변수가 있다고 할때 someNum에는 함수들이 객체로 저장되어 함수가 들어있는것이 아닌 주소를 가지고 있는것입니다. 그렇기때문에 state가 바뀌어서 새로 렌더링이 될때마다 다른 주소값을 가지게 됩니다.
그러면은 또 렌더링될때마다 값이같은 함수실행하고 의미가 없죠?

그래서 useCallback을 사용하여 num이 바뀔때만 해당 함수가 실행되도록 하였습니다.