오늘 배운 내용은 바로 hooks이다.
Hooks란?
리액트에서 클래스를 사용하지 않고도 함수 컴포넌트에서 상태(State)를 사용할 수 있도록 만들어 주는 기능이자 컨셉.
이라고 코드스테이츠 문서에 나와있다. 그리고 공식문서에선 여러가지 동기들이 설명 되어 있는데, 대충 요약하자면, 클래스를 이용했을 때 발생하는 불편함을 줄이기 위해 만들어 졌다고 한다. 그럼 클래스를 사용하면서 느꼈던 불편한 점은 무엇이 있을까?
먼저 클래스에선 state를 선언할 때 this.state를 이용하여 선언을 한다. 물론 한 컴포넌트 안에 하나의 states가 만들어지고 이 state에 변화를 줄 때 this.setState를 이용하였다. 예를 들면, state 안의 users 데이터가 있고 서버에 새로운 유저가 등록 될 때 state의 users가 업데이트 된다고 생각하면 유저를 등록을 담당하는 컴포넌트에서 state를 변경해야 하는 것인데, 우린 props를 이용해 그 컴포넌트 까지 전달하여야 한다. 만약 아주 복잡한 단계로 구현이 되어 있다면 이것을 관리하기엔 여간 힘든게 아니다.
그리고 class에선 컴포넌트의 생명주기를 갖고 있는데 마운트, 업데이트, 언마운트의 시기가 있고 사이드 이펙트를 일으키는 state를 업데이트 하기를 위해선 이 생명주기를 신경 써줘야 한다.
이러한 불편함을 줄여준게 바로 Hooks이며, 스테이트를 더욱 유연하게 사용할 수 있으며 useState라는 키워드를 통하여 더욱 직관적이고 편하게 작업을 할 수 있으며 useEffect를 이용해 생명주기에 대한 불편함을 없애주었다.
아직은 이 정도 까지 밖에 이해를 하지 못했다. 그리고 이러한 이해가 정확한 것인지도 모르겠다. 오늘 문제들을 풀어봤는데 꽤나 난관이었다. 요구 조건은 모두 통과하였지만, 코드를 쓰면서도 이게 맞는 것인가 싶었다. 왜냐면 그냥 class를 쓸 때와 별로 다를게 없었기 때문이다. 내일은 HA가 있으니 여기까지만 하고 주말에 더욱 열심히 공부해서 보충해야겠다.
