React - hook

공식문서의 hook 개요
공식문서의 내용을 요약하자면, state, props의 계층변화의 어려움/ Life Cycle 메소드의 복잡성/ class 사용의 어려움/ 을 극복하기 위해 hook을 만들었다고 한다.

그러나 class를 제거하지는 않을 것이라 한다.(이미 많은 사이트가 class 컴포넌트를 작성하였으니 hook과 병행하라고 한다.)

Thinking in Hooks

class 컴포넌트와 function 컴포넌트(hooks)의 모양은 다음과 같은 차이가 있다.

//class component
//prevState/ prevProps와 state/ props를 비교해서 컴포넌트를 업데이트한다.
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick(e) {
    this.setState({ count: this.state.count + 1 });
    // this.setState(prevState=>({
    //    count: prevState.count+1
    // }))
  }
  render() {
    return (
      <div className="App">
        <p>you clicked {this.state.count} times</p>
        <button onClick={this.handleOnClick}>click</button>
      </div>
    );
  }
}

//function component(hooks)
//useState의 두 번째 인자에 의존하여 update한다.
//state,props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행
export default function App() {
  //import React, {useState} from 'react';일 경우
  const [count, setCount] = useState(0);//0은 초기값
  
  //import React from 'react';일 경우
  //const [count], setCount] = React.useState(0)//0은 초기값
  
  return (
    <div className="App">
      <p>you clicked {count} times</p>
      <button onClick={()=>{setCount(count+1)}}>click</button>
    </div>
  );
}

둘 다 count를 1씩 증가시키는 컴포넌트이다.

• classical React는 컴포넌트가 변할 때, props가 변할 때 Life Cycle 함수를 실행한다. Hooks를 사용할 때는 useEffect의 두번째 인자에 의존하여 deta를 update한다. 이는 state, props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수를 실행할 수 있게 해준다.

• Life Cycle 시점에 따라 코드가 실행하는 컴퓨터적 사고(class 컴포넌트)에서 데이터가 변화할 때 웹 페이지가 렌더링되는 직관적인 사고(hooks)가 가능하다. 코딩의 가시성이 향상되는 것이다.
  

• 왼쪽 이미지에서는 하나의 데이터를 사용하기 위해 시점별로 실행되는 3가지 Life Cycle 함수가 있다. props가 변화할 때 마다 함수가 무조건 실행되야 하는데 이는 비효율적이다.

• 오른쪽에는 데이터 props가 내려와 변경될 때 마다 렌더링하는 함수를 실행한다. 복잡한 props가 내려와도 데이터의 변화를 보고 컴포넌트를 업데이트 할 수 있다.

가시적으로도 classical보다 hooks가 위에서 아래로 읽기만 해도 된다.

실제 classical react가 이렇게 구현된다면 이해하기가 어려워진다.
주석이 필수적으로 입력되어야 한다.

hooks로 작성할 경우 이만큼 간결해진다.