React Hooks 리엑트 훅이 뭐야? 훅훅

처음 react를 접했을 때

주변에서 리엑트 훅훅! 거리길래

훅이 뭐냐고 했다가

복싱 원투 훅 맞을 뻔했다.

 

농담이고 훅이 뭔지 알아볼거다.

 

복잡한거 싫으니 간단하게 HOOKS 이 뭔지 요약하면

 

간단 요약

Class형 방식의 컴포넌트 기능들을

Function형 컴포넌트에서 사용할 수 있도록 해준

기능들을

 

Hooks 라 하기로 했나보다.

 

.

2019년도쯤에 추가된 공식 라이브러리이며,

Class 형 컴포넌트에서만 쓸 수 있었던 state와 life cycle 등을

function 형 컴포넌트에서도 사용 가능하게 해 주었다.

(고마워 페이스북 더 열일해 줘)

 

React공식문서에서도 Class보다 function 형 컴포넌트를 권장하고 있다.

그래서 Class의 개념이 약한 사람도 react 에도 쉽게 입문할 수 있게 되었다.

 

 

그래서

왜 그렇게 훅훅 거려?

위에 말한 대로 function 형 컴포넌트를 권장하고 있고,

 

근데 일단 함수형과 클래스형의 차이점을 간단하게 알고 가야 하는데

function형 컴포넌트는 보통 리렌더링 되면, 그 함수 안에 있던 코드가 다시 실행된다. 

 

하지만,

class형 컴포넌트는 method의 개념으로,

리렌더링이 되어도 render() 를 제외한 method는 그대로 남아 있다.

 

이것은,

function형 컴포넌트들이 기존에 가지고 있던 상태 state를 관리(기억) 할 수 없게 만들어 버린다. (금붕어데스)

함수 내의 써져 있는 모든 코드와 변수들을 기억을 못 하는 문제점을 해결하기 위해서 나온 것이

 

HOOKS 두둥등장!

브라우저에 메모리를 할당함으로써, function형 컴포넌트도 상태를 가질 수 있게 되었다. (이제 금붕어아님스)

 

그렇게,

Class형 컴포넌트들은 보면 이해하기가 좀 어렵고 코드가 좀 더 복잡하고 난잡해 보이고,

위에 말했듯이 class의 (this 같은) 개념에 익숙하지 않은 사람들은 이해하기가 어렵고, 등

 

그랬는데,

이제는 function형 컴포넌트에서 hooks 를 사용해서,

훨씬 쉽고 직관적으로 같은 기능을 만들 수 있다.

뭐 그래서  hooks를 개발했다고는 하는데 아주 칭찬해 훅훅

 

그리고,

Hooks 를 사용하는데에는 규칙이 있다.

 

Hooks 규칙

1. React 함수 최상위에서만 hook을 호출한다.

- 반복문, 조건문, 충접된 함수 등에서 호출 x

 

2. React 함수에서만 hook을 호출한다.

 

3. hook을 만들때는 앞에 use 를 붙힌다.

 

4. React는 hook 호출되는 순서에 의존한다.

- 위에서부터 아래로 순서에 맞게 동작

 

자세한 규칙내용은 아래 공홈 링크참조

https://ko.reactjs.org/docs/hooks-rules.html

 

 

Hoosk 최적화를 위한 3가지

1. 컴포넌트가 반드시 필요한 리랜더링만 하는지

2.  렌더링 발생 시 property 및 method가 반드시 필요한 것에만 재할당 할 수 있게 되는지

3 . 위 2가지를 무시할만큼, 렌더링이 자주되는지

세가지를 보면 공통점이 무의미한 리렌더링 방지 및 성능 최적화에 신경쓰라는 규칙이라 볼 수 있다.

 

다음에는 Hooks 의 종류들의 대해서 포스팅 할 예정이다.