React Hooks?

React Hooks

• 리액트 훅은 16.8에 추가되었다. 리액트 개발은 훅 이전이 old 한 방식이라면 훅 이후는 완전히 다른 모던한 방식이라 앞으로 리액트를 개발할려면 반드시 사용해야 할 기술이다.
• 함

규칙

function(함수형) 컴포넌트에서만 사용할 수 있다.

• 클래스 컴포넌트에서 hook을 사용하면 안된다.
• 또한 단순한 자바스크립트 펑션에서 hook을 사용해서는 안된다

Top level에서만 사용할 수 있다.

• 루프내에서나 혹은 내부 함수나 조건문에서 사용해서는 안된다. 반드시 리액트 함수형 컴포넌트의 top 레벨에서 사용해야 한다.

특징

completely opt-in

• 훅을 적용하고 싶으면 적용할 수 있고, 원하지 않는다면 적용안할수도 있는 선택 옵션이다.

100% backwards-compatible

• 훅이 도입되면서 이전 버전이 지원되지 않는것은 아니다. 이전 문법과 100% 호환된다.

hook이 도입된 이유

state 로직 재사용의 어려움

• 리액트에서 state를 재사용하기 위해서는 render props 혹은 HoC 같은 패턴을 사용해야 한다. 그러나 이 방식은 어렵고 코드를 읽기 어렵게 만든다. 또한 디버깅 툴로 살펴보면 클래스 컴포넌트가 중첩되는 wrapper hell 현상이 나타나게 된다.
  • render props: 단순히 props 에 JSX 를 렌더링하는 함수를 전달 하는 것 입니다.
• react hook은 컴포넌트 구조를 변경하지 않고 상태 로직을 재사용할 수 있게 해준다.

복잡한 컴포넌트는 이해하기 어렵다

• 처음에는 단순한 컴포넌트로 시작하더라도 상태 로직이 추가되면 관리할수 없을 정도로 커지고 수정할 때마다 많은 사이드 이펙트를 일이킬 수 있다.
• 상태 로직이 많아질수록 복잡해지는데 그렇다고 상태 로직마다 별도의 화일로 분리하는것도 여러가지 화일들 사이를 왔다갔다화므로 효율적이지 못하다.

클래스는 어렵다

• 클래스는 리액트를 배우는 장애물이 될 수 있다. 자바스크립트에서 this 는 다른 언어와 다르게 동작하므로 이해하기가 매우 어렵다.
• hook은 클래스 컴포넌트를 사용하지 않고 펑션 컴포넌트만으로 개발할 수 있도록 해준다.

함수형 컴포넌트 VS 클래스형 컴포넌트

	함수형 컴포넌트	클래스형 컴포넌트
인스턴스 생성	없다.	new로 인스턴스 생성
렌더링	함수를 호출해서 react element를 리턴받아서 갱신	인스턴스의 render 메서드를 호출
변수저장	function 안의 변수는 기억되지 않는다. 함수가 호출될 때마다 다시 초기화	인스턴스 멤버 변수에 저장

• 컴포넌트는 state가 변하거나 props가 변하면 렌더링이 일어난다.
• 렌더링이 일어나면 클래스형 컴포넌트는 멤버 함수인 render 함수를 호출하면된다. 그러나 함수형 컴포넌트는 함수를 호출해야 하고 호출을 하게 되면 함수안에 여러가지 변수 할당과 함수 할당이 다시 일어나게 된다. 따라서 이런것들을 개선하기 위해서 useMemo, useCallback, useRef 같은걸 사용한다.