2021_05_12

유지원·2021년 5월 12일
0
post-thumbnail

TIL - React Hook

이번시간에는 React의 또 다른 기능, hook에 대하여 공부한다

1. 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 시험을 보며 복습을 한다,
오늘은 여기까지~

profile
안녕하세요 유지원입니다

0개의 댓글