[React] Hooks
Hooks
Hooks은 리액트 v16.8에 새로 도입된 기능으로 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라 부른다
Hooks은 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState & 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 만일 앱을 react hook을 사용하여 만든다면 class component. render 등을 안 해도 된다는 뜻이다 즉, 모든 것은 하나의 function 함수형 프로그래밍이 가능해진다는 것이다
Why?? 왜 굳이??
굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 이유는 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있었다. 또한, 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다
- 클래스의 문법이 어렵다
- 축소가 어렵다
- reloading의 신뢰성이 떨어진다
- 최신 기술의 적용이 효과적이지 않다
이러한 클래스의 단점들을 함수형 컴포넌트로 커버할 수 있다. 하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하이 위해 Hook이 등장했다.
React Hooks를 사용 했을 때와 안 했을 때의 차이
Class Component
import React, { Component } from 'react';
class App extends Component {
state = {
count: 0,
};
countUpdate(n) {
this.setState({
count: n,
});
}
render() {
const { count } = this.state;
return (
<div>
<div>
<h1>{count}</h1>
<button
onClick={() => {
this.countUpdate(count + 1);
}}
>
증가
</button>
</div>
</div>
);
}
}
export default App;
Hooks
import React, { Component, useState } from 'react';
const App = () => {
const [count, setCount] = useState(0);
return (
<>
{count}
<button onClick={() => setCount(count + 1)}>증가</button>
</>
);
};
export default App;
useState가 바로 Hook으로 Hook을 호출 해 함수 컴포넌트(function component)안에 state를 추가했다
useState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 핸들러나 다른 곳에서 호출 할 수 있다. useState는 클래스에서 사용하는 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 존재한다
useState
useState는 컴포넌트에서 state값을 추가할 때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도로 만들어졌다
하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 만약 컴포넌트에서 관리해야 할 상태가 여러 개면 useStte를 여러번 사용해야 한다
import
import React, { useState } from 'react';
useState는 무엇을 반환?
state는 변수, 해당 변수를 갱신할 함수 이렇게 두 가지를 반환한다. 클래스 컴포넌트와 비교하면 this.state.* 와 this.setState와 유사하다
const [value, setValue] = useState(0);
useState()가 호출되면 배열을 반환하는데, 그 배열의 첫 번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다
만약 아래와 같이 Hook을 호출해 state를 추가하고 count를 0으로 초기화 했다면
const App = () => {
const [count,setCount] = useState(0)
}
클래스 컴포넌트에서는 아래와 같다
class App extends Component {
state = {
count: null,
};
setCount() {
this.setState({
count: 0,
});
}
useEffect
useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다. 즉, 화면 렌더링이 될 때마다 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다
useEffect((안에) ⇒ {익명함수})로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다.
import
import React, { useEffect } from 'react';
선언
useEffect의 매개변수는 익명함수 () ⇒ {}와 빈배열 [] 두가지가 들어간다
- () ⇒ {} : 첫번째 매개변수로 넣은 익명함수를 넣는다. useState로 선언한 상태값 count의 값을 보여준다
- [] : 두 번재 매개변수로 배열을 넣는다. 특정 값이나 빈배열이 주로 들어간다
- 빈 배열을 넣으면 화면에 처음 렌더링 (마운트)될 때 한 번만 실행
- 배열 안에 값을 넣으면 특정 상태값이 업데이트 될 때만 실행
- 아예 배열을 생략하면 리렌더링이 할 때마다 반복 실행
useEffect(() => {
document.title = '업데이트 횟수: ${count}';
}, []);
- mount : 컴포넌트의 첫 번째 렌더링 결과가 실제 돔에 반영된 상태를 말한다
만일 useEffect에서 설정한 함수의 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우에는 두 번째 파라미터로 비어있는 배열을 넣어주면 된다
function myComponent(){
const [count, setCount] = useState(0); // count라는 state 추가를 해주자
useEffect(() => { // useEffect로 count가 업데이트될 때 마다 값을 보여주자
document.title = '업데이트 횟수: ${count}';
}, []); // 빈배열을 추가해서 불필요한 반복렌더링을 막자
return // 버튼에 onClick이벤트가 발생하면 count를 1씩 더해주자
<button onClick={() => setCount(count+1)}>
increase
</button>;
}
출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다
https://devbirdfeet.tistory.com/56?category=828965