5. 리액트 Hooks

Hooks

리액트가 처음 만들어질 때부터 있던 개념은 아니지만, 새로 생긴 중요 개념이라고 생각하자.

앞서서 컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트로 나뉜다고 하였다. (사진 참고)

이 상태에서 함수형 컴포넌트의 단점을 극복하기 위해 "Hooks"이라는 기술이 탄생하게 되었다.

hooks이 무엇인가?

훅은 "갈고리"라는 뜻을 가지고 있다. 훅은 state 관련 함수, 생명 주기 관련 함수, 최적화 관련 함수 등.. 여러 함수가 존재한다.

useState

State을 사용하기 위한 훅.

예시 코드 >

useEffect

side Effect을 수행하기 위한 훅. 사이드 이펙트는 사전적 정의로 "부작용"을 뜻한다.

예시 코드 >

이때 의존성 배열을 생략할 수 있음. (컴포넌트가 업데이트될 때마다 호출됨)

---

useEffect 에 대한 사용 방법 및 정의를 다음과 같이 정의할 수 있다.

useMemo

이 훅은 Memoized value를 리턴하는 훅이다.

Memoization이 무엇이냐 > "최적화"를 위해 사용하는 개념이다. 

예시 코드 >

유즈 메모는 렌더링 하는 동안 작동된다. 즉 렌더링이 일어나는 동안 실행되면 안 되는 기술을 넣으면 안 된다.

의존성 배열이 빈 배열이면 컴포넌트 마운트시에만 호출이 된다.

useCallback

앞의 유즈 메모랑 비슷하지만, 값이 아닌 "함수"를 리턴함.

예시 코드 >

두 훅은 비슷한 느낌이 있다.

useRef

레퍼런스를 사용하기 위한 훅.

레퍼런스는 리액트에서 특정 컴포넌트에 접근할 수 있는 "객체"이다. 이 레퍼런스를 리턴한다.

예시 코드 >

 useRef 훅은 내부의 데이터가 변경되어도 따로 알려주지 않는다.  

Hooks의 규칙

1. 훅은 무조건 최상위 레벨(리액트 함수 컴포넌트의)에서만 호출해야 한다. 반복문이나 조건문, 중첩된 함수에는 정의하면 안 된다. 그래서 훅은 컴포넌트가 렌더링 될 때에만 매번 같은 순서로 호출이 되어야 한다.

잘못된 코드 예시 >

2. 리액트 함수 컴포넌트에서만 훅을 호출해야 한다.

이때 도움이 될 플러그인을 소개하겠다.

이 훅은 훅의 규칙을 확인해 주는 플러그인이다.

Custom Hook 만들기

커스텀 훅은 언제 만들까?

간단하다. "중복되는 로직"이 있을 때 만들면 된다.

이때 커스텀 훅을 추출할 수 있다.

커스텀 훅의 정의

커스텀 함수는 딱히 규칙이 없다. 그러나 이름은 무조건 use로 시작해줘야 한다. 그리고 이것도 훅이기 때문에 앞서 말한 2개의 훅 규칙을 무조건 지켜야 한다.

그리고 여러 개의 컴포넌트에서 하나의 커스텀 훅을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.

각각의 커스텀 호출도 독립적이다.

그래서 커스텀 훅은 다음과 같은 예제 코드로 작성 가능하다.

useUserStatus가 커스텀 훅이다.

아, 그리고 앞에서 "컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다."라고 했는데, 데이터를 공유하고 싶다면 어떻게 해야 할까?

다음과 같이 useState를 사용해서 유저 아이디를 정의하고 이 아이디를 커스텀 함수의 파라미터(매개 변수)로 넣어주면 데이터가 공유된다. 즉, 훅에 아이디를 배열로 정의해 주고, 아이디를 커스텀 함수의 파라미터로 넣어주면 된다.

(실습)
Hooks 사용해 보기

먼저 코드는 다음과 같다.

useState함수를 정의. 함수 배열에 count와 setCount를 정의해 준다. useCounter라는 함수 컴포넌트를 정의한다. 이후 Accommodate라는 함수 컴포넌트를 정의한다.

이 코드들은 실행 시 먼저 "0"명부터 시작해서 입장 / 퇴장 버튼을 입력받아서 카운트를 해준다.

예시 브라우저 화면은 다음과 같다.

개발자 도구를 열면, ifFull이 false로 정의되어 있다. isFull은 최대 수용 인원인 "10명"인지 아닌지를 확인해 주는 함수이다. 입장 버튼을 쭉 눌러서 10명이 되면 isFull함수가 True가 된다.

value 값도 똑같이 증가한다.

Math.max 함수를 이용해서 0 밑으로 내려가지 않게 정의해 두어서 0명일 때 퇴장을 눌러도 호출이 되지 않는다. (10명일 때도 마찬가지이다.)

정리

정리하자면, 훅은 함수형 컴포넌트의 단점을 상쇄하기 위한 기술이며, 훅을 보면 use로 명을 짓는다.