리액트 hook

리액트의 hook을 알아보기전에 먼저 기본적으로 Side Effect이 무엇인지 알아야한다.

01 Side Effect란?

React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다.

예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(~~답답함)~~을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다.

→ 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다.

→ Hook은 이 side effect 를 수행하는역할을 한다. side effect 를 줄여 그냥 effect 라고 한다. 그래서 함수형 컴포넌트에서 사용하는 리액트hook의 이름이 useEffect 가 된다.

왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까?

react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다.

• 클래스의 문법이 어렵다.
• 축소가 어렵다.
• reloading의 신뢰성이 떨어진다.
• 최신 기술의 적용이 효과적이지 않다.

이러한 이유로 우리는 함수형 컴포넌트를 쓰게 되는것이지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 리액트 Hook이 등장한것이다.

02 React Hooks 란?

Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.

함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. 따라서 쓸때 React.useState, React.useEffect 와 같이 React 가 앞에 붙는다.

Hook 의 기능

• Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
• useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.
• State Hook - useState

useState 같은 경우는 기존 클래스 함수 structor 안에 state를 만들어주고 자식컴포넌트나 structor 밖에서 사용할때 this.무엇무엇 이렇게 쓰는데 함수형에선 this 를 사용할수없어서 this를 생략하고 useState 로 불러와서 쓰는것이다.

• Effect Hook - useEffect   : useEffect의 구조를 설명한걸  다음 링크에서 참고하면 좋다. 
• 링크 : TIL 12 useEffect