Happy coding

👉 React Hook React의 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능(state, Lifecycle)을 사용할 수 해주는 함수이다. 즉, React state와 Lifecycle 기능을 연동(hook into) 할 수 있게 해주는 함수이다. React에서 Hook을 도입하게 된 목적은 여러가지가 있지만 핵심만 정리해 보았다. 🌈 문제점 1 클래스 컴포넌트 기반의 React 코드 작성 시 컴포넌트 재사용성을 위해 Render props, Higher-Order Component와 같은 패턴을 사용해 문제를 해결하였다. 하지만 이 두 가지 패턴을 사용하기 위해 엄청난 양의 감싸는 컴포넌트들이 생겨 Wrapper Hell을 만들며, 구조적 제약 및 코드 추적을 어렵게 만든다. 🖐 잠깐 그럼..

React에는 컴포넌트를 선언하는 방식이 클래스형, 함수형 두 가지가 있습니다. 과거 React는 함수형 컴포넌트는 사용할 수 없었던 state와 Life Cycle을 사용할 수 있어 클래스형 컴포넌트를 주로 사용하였지만, React 16.8 버전 이후 'Hook' 이 도입되면서 함수형 컴포넌트도 state와 Life Cycle을 사용할 수 있게 됨과 동시에 클래스형 컴포넌트보다 더 편해진 방법으로 사용할 수 있게 되었습니다. React 공식문서에서는 함수형 컴포넌트와 훅(hook)을 사용할 것을 권장하고 있다. 👉 클래스형 컴포넌트 1. class를 선언해야한다. 2. Component를 상속 받아야한다. 3. render() 메소드가 반드시 존재해야한다. 4. state, Life Cycle 사용 가..