이번시간에는 React의 또 다른 기능, hook에 대하여 공부한다
Hook는 React 16.8에 새로 추가된 기능으로써, class형 컴포넌트가 아닌 함수형 컴포넌트에서도 state와 다른 React 기능들을 사용할 수 있게 해준다.
쉽게 말하자면, 우리가 리액트에서 state를 지정하고, 변경하기 위해서는 필수적으로 클래스형 컴포넌트를 사용해야만 했다. 그러나 react hook을 사용하면 클래스형 컴포넌트 안에서도 state를 지정할 수 있다는 것이다. 그렇다면 이것이 왜 장점이 되는 것일까?? 그냥 클래스형 컴포넌트를 사용하면 안되는 것인가??
다음은 버튼을 클릭하면 숫자를 증가, 감소 시키는 기능을 구현한 코드이다.
[클래스형 컴포넌트 사용]
class itemCount extends React.Component { constructor() { super(); this.state = { item: 1 }; this.incrementItem = this.incrementItem.bind(this); this.decrementItem = this.decrementItem.bind(this); } incrementItem() { this.setState({ item: this.state.item + 1 }); } decrementItem() { this.setState({ item: this.state.item - 1 }); } render() { const { item } = this.state; return ( <div className="App"> <h1>Hello {item}</h1> <button onClick={this.incrementItem}>increment</button> <button onClick={this.decrementItem}>decrement</button> </div> ); } }
[함수형 컴포넌트 사용]
function App() { const [item, setItem] = useState(1); //초기 상태를 저장한다. const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( <div className="App"> <h1>Hello {item}</h1> <button onClick={incrementItem}>increment</button> <button onClick={decrementItem}>decrement</button> </div> ); }
아직 정확히 뭔지는 모르겠지만 일단, 코드의 길이, 가독성 면에서 매우 차이가 난다. 클래스형 컴포넌트에서는 this.state로 상태를 저장하고, this를 위한 바인딩, render등 신경써야 할 것 투성이인데, 함수형 컴포넌트에는 그런 것이 없다는 것이 가장 큰 장점이다.
그렇다면 이제, 본격적으로 hook에 대해서 공부해보자.
(1) useState Hook
클래스를 사용할 때 constructor 안에서 this.state를 설정함으로써 상태를 초기화하고 this.setState를 이용하여 상태를 갱신했다. Hook에서는 useState를 사용할 수 있다.
const [item, setItem] = useState(1)
item이라는 state 변수를 선언하고, 초기값은 1로 할당한다. "배열 구조 분해"를 이용하였다.
setItem(item + 1)
item 변수의 상태를 변경하려면 setItem을 호출한다
(2) useEffect Hook
useEffect(() => {
//이 함수가 작동이 된다.
}, [ /*여기에 있는 배열 요소가 변경이 되면 */])
컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook이다.
클래스를 사용할 때 componentWillMount, componentDidUpdate 등 많은 생명주기 메소드가 있었는데 이를 hook에서는 useEffect로 이용한다.
1) 두 번째 인자에 빈 배열을 넣으면 컴포넌트가 가장 처음 렌더링 될 때 한번만 실행한다. 마치 componentDidMount 메소드처럼 작동한다.
2) useEffect 안에서 cleanUp 함수를 실행시키면 마치 componentWillUnMount 메소드처럼 작동한다.
3) 두 번째 인자를 작성하지 않으면 컴포넌트가 리렌더링 될 때마다 실행된다. 마치 componentDidMount, componentDidUpdate 메소드를 합친 것과 같이 작동한다.
4) 두 번째 인자로 배열에 값을 넣어주면 해당 값이 업데이트 될 때 실행된다.
이번시간에는 React Hook에 대하여 공부하였다. 다음 시간에는 지금까지 배웠던 것을 이용하여 HA 시험을 보며 복습을 한다,
오늘은 여기까지~