TIL 46 | React Hooks(1)

리액트 훅은 클래스형 컴포넌트의 복잡성과 낮은 재사용성을 개선하기 위해 함수형 컴포넌트에서도 state 관리나 life cycle method를 다룰 수 있도록 고안된 메서드를 의미한다.

• useState()
• useEffect()
• useRef()

useState()

useState()는 함수형 컴포넌트에서 상태관리를 수행한다.

//기본형
const [ state이름 , state를 갱신할 함수 ] = useState(state 초기값)

• 버튼을 누르면 카운트가 증가하는 UI 구현 (출처 : 리액트 공식 홈페이지)

// 예시
import React, { useState } from 'react'; // useState import

function Example() { // state 변수 'count' 와 state값을 갱신시킬 함수 'setCount' 선언
  const [count, setCount] = useState(0); // count state의 초기값은 0이다. 

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> 
      // 버튼 클릭으로 setCount 함수가 실행되고 이 실행으로 count 값이 증가할 때마다 화면은 리렌더링 된다. 
        Click me
      </button>
    </div>
  );
}

위 예시를 클래스 컴포넌트와 this.setState로 다시 구현해보면 코드 길이도 길고 가독성도 떨어짐을 알 수 있다.

import React from "react";

class App extends React.Component {
  state = {
      number: 0
  };

  handleClickIncrement = () => {
    this.setState(state => ({
      number: state.number + 1
    }));
  };

  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClickIncrement}>더하기</button>
      </div>
    );
  }
}

useEffect()

useEffect()는 side effect를 실행할 수 있게 하는 hook이다. 이를 사용하면 함수형 컴포넌트에서도 Life cycle method 를 다룰 수 있다.

useEffect()는 컴포넌트가 처음 마운트 될 때 (componentDidMount), 컴포넌트에 새로운 props가 전달되거나 state 값이 변경될 때 (componentDidUpdate), 컴포넌트가 Unmount되기 직전(componentWillUnmount)에 실행된다.

// 기본형
useEffect(함수, 의존성 배열) 
// 첫번째 인자인 함수는 리렌더링 될때마다 side Effect를 발생시킬 함수이다.
// 두번째 인자는 실행될 조건을 한정하는 것으로 필수 인자는 아니다.

• useEffect의 조건부 실행

useEffect(함수, []) // 처음 마운트 될 때 한번 실행하고 종료 (= componentDidMount)
useEffect(함수) //  렌더링 될때마다 실행
useEffect(함수, [state]) // state 값이 바뀔 때마다 실행
useEffect(()=>{()=>{return 어쩌고}} // return을 호출하면 componentWillUnmount처럼 활용할 수 있다.

useRef()

useRef()는 특정 DOM을 제어할 때, 컴포넌트 내에 수정 가능한 변수를 관리할 때, useEffect와 함께 사용하여 특정함수를 clear할 때 사용할 수 있다.

useRef()는 앞선 훅들과는 달리 내용이 변경될 때 리랜더링을 발생시키지 않는다. 따라서 useRef() 값의 변화에 따라 어떤 코드를 실행하고 싶다면 콜백 ref를 사용하면된다.

• video play 제어 예시

import { useRef } from "react";

export default function App() {
  const videoRef = useRef(null); // useRef(초기값)
  // useRef객체는 current라는 키를 가지고 있다. 

  const playVideo = () => {
    videoRef.current.play();
  };

  const pauseVideo = () => {
    videoRef.current.pause();
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        <source
          type="video/mp4"
          src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
        />
      </video>
    </div>
  );
}

useRef()를 통해 DOM 제어를 할 수 있음과 동시에 play, pause로 값이 바뀌어도 컴포넌트가 리렌더링 되지 않아 컴포넌트 최적화에 기여한다. 그러나 제시된 상황 제외한 대부분의 경우 기본 리액트 문법을 벗어나 useRef를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.