[react] Hooks란?

Hook에 대한 이론을 완벽하게 이해하지 않고 useState나 useEffect를 쓰다 보니

오잉? 싶은 부분이 많았다 다시 되짚어볼 겸 리액트 훅에 대해 정리해보자!

 

 

1. Hooks란?

 

Hook은 React 16.8 버전에 새로 추가된 기능으로, class를 사용하지 않고도 state를 가질 수 있게 해 준다.

Hook을 사용하면 클래스형 컴포넌트를 사용할 때에 비해 코드가 간결해져서 가독성이 좋아진다.

 

Hook은 왜 만들어졌을까?

기존 클래스형 컴포넌트에서의 단점을 함수형 컴포넌트를 사용함으로써 보완할 수 있었다.

하지만 클래스형 컴포넌트의 장점인 state이나 life cycle을 함수형 컴포넌트에서 직접 다루는 것은 불가능했다.

이 문제를 해결하기 위해 Hook이 등장한 것이다.

 

 

2. Hook 사용방법

 

기존 클래스형 컴포넌트에서 state 사용방법

class App extends Component {
  state = {
    count: 0
  };

  modify = (n) => {
    this.setState({
      count: n
    });
  };
  
  render() {
  
    const { count } = this.state;
    
    return (
      <div>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>Click!</button>
      </div>
    );
  }
}

export default App;

 

함수형 컴포넌트에서 Hook을 사용한 state 사용방법

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

 

 

3. Hook의 규칙

 

• 항상 return이 실행되기 전 최상위에서만 Hook을 호출해야 한다.
• 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안 된다.