[React] Hooks란?

Hooks

React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리

hook은 함수형 컴포넌트에서도 state와 생명주기를 다룰 수 있기에 클래스형 컴포넌트에서만 가능하던 상태관리를 더 손쉽게 할 수 있도록 함

결론적으로 functional component에서 state를 가질 수 있게 해줌

 

class component state 예시

class App extends Component {
  state = {
    count: 0
  };
  modify = n => {
    this.setState({
      count: n
    });
  };
  
  render() {
    const { count } = this.state;
    return (
      <>
        <div>{count}</div>
        <button onClick={() => this.modify(count + 1)}>Increment</button>
       </>
    );
  }
}

export default App;

 

functional component state 예시

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
};

export default App;