React Hooks ?
Hooks는 함수 컴포넌트에서 사용하는 메서드를 뜻한다.
Hooks에 대해 제대로 이해하려면, 우선 함수 컴포넌트(Function Component)와 그 이전 React 개발에 사용하던 클래스 컴포넌트(Class Component)를 비교할 필요가 있다.
Class Component
// Class Component <Counter />
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
this.handleIncrease = this.handleIncrease.bind(this);
}
handleIncrease = () => {
this.setState({
counter: this.state.counter + 1;
})
}
render(){
return (
<div>
<p>You clicked {this.state.counter} times</p>
<button onClick={this.handleIncrease}>Click me</button>
</div>
)
}
}위의 코드는, 버튼을 누르면 카운터가 실행되는 간단한 기능을 구현하는 코드이다. 간단한 기능을 구현하는 코드임에도, 아래의 함수 컴포넌트 방식에 비하면 매우 복잡하고 이해하기 어렵다는 것을 알 수 있다. 또한, JS의 this 키워드가 무엇인지 모른다면 코드 동작 방식을 이해하기가 어렵다는 단점이 있다.
Function Component
function Counter() {
const [counter, setCounter] = useState(0);
const handleIncrease = () => {
setCounter(counter + 1);
}
return (
<div>
<p>You clicked {counter} times</p>
<button onClick={handleIncrease}>Click me</button>
</div>
)
}위의 코드를 보면 알 수 있듯이, 함수형 컴포넌트 방식은 클래스 컴포넌트 방식에 비해 훨씬 더 직관적이고 보기 쉽다는 특징이 있다.
이전의 함수형 컴포넌트 방식의 경우, 클래스 컴포넌트 방식에 비해 상태 값을 사용하거나 최적화할 수 있는 기능이 미진했는데, 이를 보완하기 위해 Hook이 도입되었다.
이 Counter 컴포넌트에서 숫자를 올리기 위해, 상태값을 저장하고 사용할 수 있게 해주는 useState()가 바로 Hook 이며, 상태 state는 컴포넌트가 리렌더링 되어도 그대로 유지된다.
Hook
React 공식 문서에 나온 Hook에 대한 설명은 다음과 같다.
Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
즉, 쉽게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러가지 기능을 사용하기 편리하게 해주는 메서드를 의미한다.
이 Hook은 class가 아닌 function으로만 React를 사용할 수 있게 해주는 것이기 때문에 클래스형 컴포넌트에서는 동작하지 않는다.
Hook 사용 규칙
- 리액트 함수의 최상위에서만 호출해야 한다.
-
반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않을 우려가 있다.
-
컴포넌트 내에서 useState나 useEffect와 같은 Hook들을 여러번 사용할 때, React는 이 Hook을 호출되는 순서대로 저장을 해놓는다.
그런데 조건문, 반복문 안에서 Hook을 호출하게 되면 호출되는 순서대로 저장 하기가 어려워지고 예기치 못한 버그를 초래할 수 있게 된다.
- 오직 리액트 함수 내에서만 사용되어야 한다.
- 즉, 리액트 함수형 컴포넌트나 커스텀 Hook이 아닌 다른 일반 JS 함수 안에서 호출해서는 안된다는 뜻이다.
- 애초에 Hook은 React의 함수 컴포넌트 내에서 사용되도록 만들어진 메서드이기 때문에 근본적으로 일반 JS 함수 내에는 정상적으로 들어가지 않는다.
