🔍 Component & Hook

React Hooks는 React 16.8 버전부터 추가된 기능으로, 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업할 수 있게 만든 기능이다.

뛰어난 재사용성과 직관성을 갖는 함수형 컴포넌트와 Hook은 사용률이 매우 높은 편이다.

👀 Class Component

함수 컴포넌트 이전에 사용했던 방식으로, 복잡해질 수록 이해하기 어렵고, state 로직을 재사용하기 어렵다는 단점이 있다.

이러한 문제 때문에 점진적으로 함수 컴포넌트를 사용하는 것으로 넘어가게 되었으나, 함수 컴포넌트는 state값을 사용하거나 최적화할 수 있는 기능들이 class 컴포넌트에 비해 미진했기 때문에 이 부분에 대한 보완을 위해 Hook이 도입되었다.

Class Component -> Function Component -> Function Component + Hook

아래는 <Counter /> 컴포넌트를 Class로 작성한 코드로, 단순히 카운팅을 하는 기능만 구현되어있다.

class ClassCount extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}

render() {
	return (
		<div>
			<p>count: {this.state.count} per times clicked</p>
			<button onClick={() => this.setState({ count: this.state.count + 1 })}>
				Click this button
			</button>
		</div>
		);
	}
}

👀 Function Component

아래는 Class Component 예시 코드와 같은 동작을 하며,<counter />컴포넌트를 함수형 컴포넌트로 작성한 코드이다.

Class Component와 비교했을 때, 상대적으로 직관적이고 보기 쉽다.

const FunctionalCount = () => {
	const [count, setCount] = React.useState(0);
	return (
		<div>
			<p>count: {count}</p>
			<button onClick={() => setCount(count + 1)}>Click this button</button>
		</div>
	);
};

useState()라는 상태값을 저장하고 사용할 수 있게 해주는 State Hook을 호출해, 함수 컴포넌트안에 state를 추가한 형태이다.

이러한 State Hook은 여러 개 사용이 가능하며, 컴포넌트가 리렌더링 되더라도 state는 그대로 유지된다.

👀 Hook

함수형 컴포넌트에서 state 값 및 다른 여러 기능을 사용하기 편하게 해주는 메소드로, function으로만 React를 사용할 수 있게 해주기 때문에 Class Component에서는 동작하지 않는다.

✔ Hook 사용 규칙

1. React 함수의 최상위에서만 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 실행 시, 동작하지 않는다.

2. React 함수 내에서만 사용되어야 한다.

오직 React Function Componet나 Custom Hook에서만 호출 가능하다.(일반 JavaScript 함수xx)

Reference:

코드스테이츠

https://www.xenonstack.com/blog/functional-vs-class-components