React _ Hook

이번주에 React Hook을 배웠다.
여태까지 클래스형 컴포넌트를 사용했는데, hook을 이용하면 함수형을 사용할 수 있었다. 사실 왜 굳이 함수형을 써야 되는지도 잘 몰랐고, 이미 class형에 많이 익숙해져 있던 상태라 예제만 보고는 코드가 쉽게 눈에 들어오지 않았다.
간단하게 Class형과 Hook을 쓸 때의 코드를 비교해보자.

컴포넌트 선언

class

class Main extends React.Component {
  render(){
    return <h1>Main</h1>
  }
}

hook

const Main = props => {
  return <h1>Main</h1>
}

state값 초기화

class

constructor(){
  super();
  this.state = {
    isValid: true,
    user: {
      id: 1,
    }
  }
}

hook

const [state 변수명, 해당 state값 set할 함수명] = useState(state 초기화 값)

// hook
const [isValid, setIsValid] = useState(true);
const [user, setUser] = useState({id: 1})

class 형에서는 this.state 안에서 모든 state 값들을 선언해주고 this.setState안에서 모든 state값들을 변경해주는 방식이다.

Hook은 state값들을 따로 선언해주어야 하며,
각 state값들을 set하는(setState와 같은 역할) 함수도 각각이다.
따라서 관심사의 분리가 가능하다.

state값 변경

class

this.setState({
  name: 'iPhone8',
  price: 70
})

hook

const [name, setName] = useState("");
const [price, setPrice] = useState(0);

setName("iPhone8");
setPrice(70);

UseEffect()

함수형 컴포넌트를 사용하게 되면 lifecycle이 없다.
즉, componentDidMount, componentDidUpdate 등이 없다는 말이다.
그러면 Hook에서는 이러한 class들을 어떻게 대체할까?

useEffect 함수는 렌더링이 완료되면 실행되는 함수이다.
인자로 실행할 콜백함수와 의존성배열 2가지를 받는다.

useEffect(() => {}, [])

한 페이지에서 렌더링을 한번만 실행하지는 않기 때문에, 매번 렌더링 할 때 마다 useEffect가 실행된다면 무한 루프가 발생하거나 원하지 않는 동작을 하게 될 것이다. 이를 방지하기 위해 의존성 배열로 useEffect가 실행될 조건을 걸어준다.

조건으로 빈 배열을 걸게 되면, 최초 한 번만 실행하여 componentDidMount처럼 사용할 수 있다.

componentDidMount

componentDidMount(){
  this.setState( {id: 1} );
}

useEffect

useEffect(() => {
  setId(1)
}, [])

Hook에 익숙해지고 싶어서 해당 코드들을 계속 사용하기 시작했다.
처음에는 눈에 익지 않아서 헷갈렸는데, 사용하면 사용할수록 코드도 간단하고 훨씬 명시적이라는 느낌이 들었다.

Class형은 LifeCycle을 사용해서 그런지 시간의 흐름을 따르는 코드를 작성하는 느낌이었는데, Hook을 사용하니까 state를 각각 선언하고 set해서 그런지 좀 더 객체와 객체의 동작에 초점이 맞춰진 느낌이었다.

Hook이 훨씬 사용하기 편리하고, class형보다 로직을 구현할 때에 제한이 적은 편이다.