React hook 🌱

React Hook이란?

React Hook은 자바스크립트 함수 입니다.

Hook은 class를 작성하지 않고도 state와 React의 기능들을 사용할 수 있게 해줍니다

Hook이 등장한 이유는 다음과 같습니다.

컴포넌트 사이에서 상태로직을 재사용하기 어렵습니다. -> Custom hook의 등장배경
- Render Props와 HOC 같은 패턴은 코드의 파악이 어렵다
- 상태 관련 로직을 추상화 하기가 어렵다 (이 내용은 클래스형 컴포넌트 공부후에 이해가 더 될듯)
Class는 사람과 기계를 혼동시킵니다.
- this가 동적으로 결정되기 때문에 클래스 내부에서 파악하기가 어렵다
- class는 코드의 최소화를 힘들게 만들고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다.
복잡한 컴포넌트들은 이해하기가 어렵다
- 생명주기 class 메서드가 관련이 없는 로직들은 모아놓고, 관련이 있는 로직들은 여러개의 메서드에 나누어 놓는 경우가 자주 있었다.

componentDidUpdate() {
  // 데이터 요청
  // 이벤트 리스너 등록(해당 컴포넌트에서만 사용되기 때문에 재사용 되기 어렵다)
}

componentWillUnmount() {
  // 이벤트 리스너 해제(해당 컴포넌트에서만 사용되기 때문에 재사용 되기 어렵다)
}




// effect에서 코드 중복의 예시
componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
}
componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
}

// class안의 두개의 생명주기 메서드에 같은 코드가 중복되어 있다 
// => 마운트 된 후, 업데이트 된 후에 동일한 결과를 보여주어야 하기 때문에 중복된 코드가 있다 
// 이를 useEffect를 사용하면 아래와 같이 사용하여 중복을 줄일 수 있다.

useEffect(() => {
  document.title = `You clicked ${this.state.count} times`;
})

Hook의 종류에는 useState, useEffect, useReducer, useContext, useCallback, useMemo, useRef, useLayoutEffect 등이 있습니다.

Hook을 사용할 때는 두가지 규칙을 지켜야 합니다.

최상위 레벨 에서만 Hook을 호출한다.
반복문이나 조건문에서 Hook을 호출하면 안됩니다.
오직 React 함수 내에서 Hook을 호출한다.
React 함수 컴포넌트 내부에서 Hook을 호출하여야 합니다.
커스텀 훅에서 Hook을 호출하여야 합니다.

최상위 레벨에서 사용해야 하는 이유는 다음과 같습니다.

React에서는 Hook이 호출된 순서에 의존하기 때문입니다.

function Form() {
  const [name, setName] = useState('Mary');
  useEffect(function persistForm(){
    localStorage.setItem('formData', name);
  })
  const [surname, setSurname] = useState('Poppins');
  useEffect(function updateTitle(){
    document.title = name + ' ' + surname; 
  })
}


// 첫 번째 렌더링
useState('Mary');         //  1. Mary라는 name state 변수를 선언합니다.
useEffect(persistForm)    //  2. 폼 데이터를저장하기 위한 effect를 추가합니다.
useState('Poppins');      //  3. Poppins라는 name state 변수를 선언합니다.
useEffect(persistTitle)   //  4. 제목을 업데이트 하기 위한 effect를 추가합니다.

// 두번째 렌더링
useState('Mary');         //  1. name state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistForm)    //  2. 폼 데이터를 저장하기 위한 effect가 대체됩니다.
useState('Poppins');      //  3. surname state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistTitle)   //  4. 제목을 업데이트 하기 위한 effect가 대체됩니다.

만약 아래와 같이 조건문이 추가되어 훅이 호출되는 순서가 변경되었다면

// 🔴 조건문에 Hook을 사용함으로써 첫 번째 규칙을 깼습니다
if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
}

useState('Mary')           // 1. name state 변수를 읽습니다. (인자는 무시됩니다)
// useEffect(persistForm)  // 🔴 Hook을 건너뛰었습니다!
useState('Poppins')        // 🔴 2 (3이었던) surname state 변수를 읽는 데 실패했습니다.
useEffect(updateTitle)     // 🔴 3 (4였던) 제목을 업데이트하기 위한 effect가 대체되는 데 실패했습니다.

리액트 Hook은 호출된 순서에 의존하기 때문에 위와 같이 조건문에 의해 호출 순서가 변경된 경우에는 사용하면 안됩니다.

만약 조건문을 사용하고 싶다면 아래와 같이 사용하면 됩니다.

useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
});

Custom Hook이란?

커스텀 훅을 사용하면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.

주로 여러 컴포넌트에서 반복되는 로직인 경우 커스텀 훅을 사용하거나 하였습니다.

이렇게 커스텀 훅으로 작성하여 코드의 중복을 줄이고 코드의 파악이 좀더 수월할 수 있도록 하였습니다.

하나의 컴포넌트에서 여러 상태를 거느려야 할 경우에는 복잡한 상태 + 코드의 양이 많아져 컴포넌트의 재사용, 파악이 어려워 졌었습니다.

이러한 경우에도 커스텀 훅을 사용하여 코드의 양을 줄이고 파악에 수월할 수 있도록 하였습니다.

함수형 컴포넌트란 ??

리액트에서 컴포넌트를 정의하는 방법중 하나로 javascript 함수를 이용하여 React element를 반환하는 컴포넌트를 말합니다.

컴포넌트를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

이 함수는 데이터를 가진 하나의 "props" 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 이러한 컴포넌트는 Javascript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭합니다.

함수형, 클래스형 컴포넌트, 훅의 등장 순서

함수, 클래스형 컴포넌트 -> 훅 등장

함수형, 클래스형 컴포넌트가 먼저 존재하였습니다.

하지만 함수형 컴포넌트에서는 상태관리를 할 수 가 없었습니다.

단순히 props만 전달받아 렌더링만 해주는 형식이였죠

Stateless Functional Component라는 키워드로 검색하면 더 많은 정보를 알 수 있을 것입니다.

이후에 16.8 버전에서 훅이 등장합니다.

훅은 개인 개발자에 의해 만들어졌고 페이스북에서 훅을 구매하여 페이스북에 입사하신걸로 알고 있습니다.(실력 매우 부럽네요)

훅으로 인해 함수형 컴포넌트에서 상태관리가 가능해졌습니다.

훅이 등장한 이유는 위에서 설명했지만 간략히만 다시 알아보면

1. 컴포넌트간에 상태 관리 로직의 상태 불가능

2. 복잡해진 컴포넌트(클래스 상태관리 메서드에서 관련 없는 메서드는 모이고 관련 있는 메서드는 헤어지는 상황 다수 발생)

3. this가 초래한 사람, 기계의 혼잡도(this는 사람이 인식하기 힘들고, 컴파일을 진행할때 class는 컴파일을 지연시키는 상황이 발생했었다 합니다)

그래서 훅이 등장했고 훅을 함수형 컴포넌트에서 사용하게끔 되었습니다.

훅은 클래스형 컴포넌트에서는 동작하지 않습니다.

훅의 디테일한 내용과 직접 구현해보는 상황은 추후에 포스팅할 예정입니다.

출처 : https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

A JavaScript library for building user interfaces

ko.reactjs.org

https://jooonho.com/react/2021-05-01-hooks/

React Hook

Hook에 대해서 알아보자

jooonho.com

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React