Class vs Hooks and more about Hooks

2021.03.25
Read Time: 13 mins
정식문서와 여러 사람들의 의견, 그리고 저의 경험에 대한 설명과 결론을 간단하게 적어보았습니다. class를 모르신다고 해도개발을 하는데는 지장은 없으니, 너무 부담 갖지 않으셔도 됩니다.
리액트에서 class를 썼던 분들은 전체를 다 읽어보시면 됩니다. 안쓰셨던 분들 혹은 hooks 가 처음이신 분들은 클래스와 훅스 비교부분을 제외한 부분을 읽어보시면 됩니다. 훅이 처음이신 분은 일단 react 에서 class를 스킵하시는 것도 초반엔 괜찮습니다.

Hooks

훅은 클래스를 사용하지 않고, 스테이트와 다른 리액트의 기능들을 쓸수 있게 해주는 기능입니다. 실제 공식 문서에서도 정확히 이야기 하고 있듯, 훅스는 함수입니다. 이 함수는 조금 특별한데, 라이프사이클 기능과 스테이트에 hook into하는 함수 입니다. 훅인투라고 하면 ~가에 연결 되었다 정도로 생각하시면 됩니다. (즉, 스테이트와 라이프 사이클에 연결되었다라고 이해하시면 됩니다.) 그리고 클래스 내부에서는 사용이 불가능합니다. 함수형에서만 사용이 가능하죠.
예전엔 함수안에서 스테이트를 쓰고 싶다면 클래스로 바꿔야 했지만, 이젠 아니죠!
Hooks better than Classes (클래스보단 훅스!) - 지극히 개인적인 생각입니다만!
hooks에서는 더이상 this를 쓰지 않아도 된다는 점
→ 더 이상 설명이 필요가 없죠! 모르시다면 패스!
hooks에서는 method binding을 하지 않아도 된다는 점
→ 클래스에선 함수를 this에 바인딩을 해야만 다른 함수나 컴포넌트에서 사용이 가능했지만, functional하게 만드는 경우엔 그럴 필요가 없죠! (모르시다면 패스!)
hooks에서는 useEffect를 잘 활용하면, logic 을 consistent하게 가져갈 수 있다
class에선 lifecycle이 복잡했지만, hooks에서 매우 단순화해졌죠! 관리도 편하구요
hooks에서는 staeful logic을 컴포는트들 끼리 쉐어링이 간단하다 (리유저블리티 굳굳)
Hooks allow you to reuse stateful logic without changing your component hierarchy.
물론 render-props를 써서 가능은 하지만, 더 간단하게 코드를 작성할 수 있습니다.
훅을 쓸때의 몇가지 룰이 있는데,
1. Only call Hooks at the top level
2. Only call Hooks from React functions
정도 입니다. 이해가 잘 안된다면, 가장 위에 선언하자! useState, useEffect등을 말이죠.
처음 setState대신에 useState를 쓰면 됩니다, componentDidMount대신에 useEffect를 쓰시면 됩니다라고 설명을 많이들 하는데, 그렇게 입문을 해도 괜찮습니다. 처음에 setState를 들어보지 못하신 분들이라면, 모르셔도 됩니다. useState는 훅스의 한 종류이며, 이 훅스가 하는 역할은, 스테이트를 get, set할 수 있게 해주는 함수 입니다.
useState라는 훅스는 다음처럼 사용합니다.
const [someVariable, setSomeVariable] = useState('initial value')
JavaScript
useState의 리턴 값은 두개 인데, 첫번째는 리드 할 수 있는 변수, 두번째는 useState 훅스의 "무언가"를 하게 하는 함수 입니다. setSomeVariable(여기에 어떠한 값) 을 호출 하면, useState는 그 어떠한 값으로 someVariable를 업데이트 해주고 이 영역은 다시 렌더링이 되게 되죠. setState를 안다면 setState와 같은 기능입니다.
이 useState는 내부 함수에서 호출을 못합니다. 오직 탑 레벨에서만 할 수 있어요. 에러를 한 번 내보시는 것도 추천드립니다.
훅스의 네이밍 컨벤션은 use{...} 입니다. 예를 들어, 특정한 기능이 있는 count를 함수로 짠다면 useCount로 해서 훅스로 디자인해볼 수도 있겠죠.
아래는 커스텀 훅스의 간단한 예시 입니다. 코드 답을 보시기 전에 간단히 생각해 보시고 열어보세요.

과제

1.
마우스 포지션을 알려주는 hooks를 디자인해보자.
임의의 element에 적용이 될 수 있도록 작성해보시오.
2.
보이스 레코그 니션 hooks를 간단히 만들어보세요.
parent component에서 버튼을 눌러서 on/off를 할 수 있도록 만들어보세요.
과제1 : 마우스 포지션을 알려주는 hooks를 디자인해보자.
sample answer
과제2: 보이스 레코그 니션 hooks를 간단히 만들어보세요.
sample answer
useReducer 라는 훅스도 있습니다. 이는 context 설명하는 문서에 조금 자세히 기재 해두었습니다.