2023.05.11 - ???: 아 진짜 레프트 훅 날리고 싶네 (부제: Hook 알아보기)

안녕하세요, OS술사입니다.

5월달이 무슨 달인지 아시나요?

 

가정의 달로 더 유명하지만

사실 저희들에겐 인턴 면접의 달이죠

 

정말 좋은 기회를 얻게 되어 제가 지원한 3개 포지션 모두

서류합격을 하고 면접을 보았는데

.

.

.

.

???: 아 힌트를 드리자면 hook이랑 관련되어 있어요

???: hook 모르면 리액트 써봤다고 말하기 그렇거든요, 혹시 알고 계신가요?

???: hook에 대해서 아는 만큼 설명해주실 수 있나요?

 

그... 그냥 썼는데요 흑흑

 

사실 처음 질문 받았을 때나 당황했지

모든 면접에서 한 번씩 물어보니까 어느 순간부터

웃음..이 나다가

.

.

콱씨 그만 물어봐!!!!!!!!!!!!

정말 우리의 hook이라는 친구가 중요하긴 한가 봅니다.

그래서 오늘은 이 아이가 왜 중요하고 어떤 배경에서 나왔는지

간략하게 정리해보는 시간을 가지려고 합니다.

 

 

React Hook이란?

- 리액트 훅은 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이

함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어주는 라이브러리

- React 16.8 버전에서 새롭게 추가된 기능

- 함수형 컴포넌트를 대상으로 만들어졌기에 함수형 컴포넌트에서만 사용 가능

 

 

 

오래 전 기억을 되새김질한 결과

실제로 리액트 훅의 등장 이전까지는 상태 관리를

클래스형 컴포넌트에서만 가능했기 때문에

상태관리 예제는 클래스형 컴포넌트로 배운 기억이 있었다.

 

하지만, 이제 상태를 관리하기 위해서 클래스를 사용할 필요가 없어져서

함수형 컴포넌트를 이용해도 아무 문제가 없어지게 되었다.

 

 

한 줄로 다시 요약하자면 Hook은 리액트 컴포넌트에서

'상태'와 '이펙트'를 도입하고 관리하는 효과적인 메커니즘이다.

 

Hook의 규칙

Hook을 사용하는 것에는 몇 가지 규칙이 있다.

간단하게만 살펴보자면 아래와 같다.

 

1. 최상위에서만 Hook을 호출해야 한다.

- for, while 등의 반복문 if나 ? : 등을 이용한 조건문, 중첩된 함수 내부에서 Hook을 호출하면 안됨

- 리액트 hook은 호출 순서에 의존하기 때문에 위처럼 조건문, 반복문, 함수 내에서 실행하게 될 경우 해당 부분을 건너 뜀으로 에러가 발생할 수 있음.

- 최상위에서만 Hook을 호출하는 경우에는 useState나 useEffect가 호출되어도 hook의 상태를 우리가 의도한 바와 같이 올바르게 유지할 수 있음.

2. 리액트 함수 내에서만 Hook을 호출해야 한다.

- Hook은 일반 js 함수 내부에서는 호출하면 안됨.

- 함수형 컴포넌트, 커스텀 훅에서는 호출이 가능함.

- 클래스형 컴포넌트를 대상으로 만들어진 것이 아니기 때문에 사용을 지양함.

 

 

그래서 hook이 뭔데?

사실 리액트로 토이 프로젝트를 간단히 진행하거나

저처럼 구글링하면서 문제를 해결한 경우에는 hook이 무엇인지는 모르지만

몇 가지 예시만 보시면 '아~ 얘가 훅이었구나~' 하실 겁니다.

 

대표적인 Hook으로는 useState, useEffect, useRef, useMemo 등이 있습니다.

 

 

이 중에서도 특히, 상태 관리를 도와주는 useState

이펙트를 생성하고 관리하는 useEffect

Virtual Dom을 사용하는 리액트에서 직접 DOM을 조작할 때 사용하는 useRef

 

이 세 가지 정도는 어떤 기능을 구현하려고 해도

빠짐 없이 등장하는 친구들이기 때문에

 

이번 기회에 관심을 갖고 더 알아보면 좋을 거 같습니다!

 

 

다음에는 운영체제로 돌아오고 싶은데...

이 Lock..? 되게 어렵더라구요 주말동안 수련해서 돌아오겠습니다 :)