4. Hook을 사용하는 이유
앞이랑 이어지도록
앞에서 봤듯이 함수 컴포넌트에서 상태관리와 생명주기 메서드를 이용할 수 없었기에 로직의 재사용 및 구조 파악이 어렵고, 코드가 복잡한 클래스 컴포넌트를 사용할 수 밖에 없었습니다.
Hook이 나오기 전까지는 클래스 컴포넌트가 더 많이 사용되었는데 그 이유는 함수 컴포넌트에서는 상태(State) 관리와 생명주기(Lifecycle) API를 사용할 수 없었기 때문입니다. 하지만 클래스 컴포넌트는 컴포넌트 간 상태 로직의 재사용 및 구조 파악이 어렵고, 코드가 복잡하다는 단점이 있습니다.
이 단점들을 보완하고자 Hook이 탄생했으며, Hook은 3가지 장점을 가지고 있습니다.
- Hook을 통해 컴포넌트 간 상태를 저장하고 공유할 수 있습니다.
- Hook은 구조를 이해하기 쉽습니다.
- Hook은 클래스 컴포넌트 없이 리액트를 사용 가능하게 만듭니다.
React에서는 이와 같은 장점을 이유로 Hook을 사용하는 것을 권장하며, 지금부터 공식문서에 정의된 내용을 바탕으로 훅의 사용 동기를 이야기해보겠습니다.
첫 번째, Hook을 통해 컴포넌트 간 상태를 저장하고 공유할 수 있습니다.
개발을 하다보면 컴포넌트 간 중복된 코드들을 쉽게 만날 수 있습니다. 그러나 React는 컴포넌트 간 로직이 재사용 될 수 있는 방법을 제공하지 않았습니다. 이에 컴포넌트의 재사용성을 위해 Render props, 고차 컴포넌트(HOC, Higher Order Component)와 같은 패턴을 사용해서 이와 같은 문제를 해결했습니다. 하지만 이러한 패턴들을 사용하면 코드를 추적하기 어렵게 되고, 여러 패턴들이 만나 발생되는 래퍼 지옥(wrapper hell)을 피할 수 없었습니다. Hook이 탄생하면서 이러한 문제는 Custom Hook을 통해 해결할 수 있게 되었고, 함수 컴포넌트에서도 컴포넌트 간 상태를 저장하고 공유 및 테스트가 가능하게 되었습니다.
두 번째, Hook은 구조를 이해하기 쉽습니다.
컴포넌트의 구조가 복잡할 경우, 라이프 사이클(Lifecycle)의 구조 또한 파악하기 힘들기 때문에 유지 보수가 어려워집니다. 또한 React는 컴포넌트 간 상태를 저장하고 공유할 수 없으므로 상태 관련 로직을 따로 관리하고자 컴포넌트로 작게 분리하는 것은 거의 불가능하며 테스트하기도 어렵습니다. 이를 별도의 상태 관리 라이브러리와 함께 결합하여 보완할 수 있으나, Hook을 사용하면 구조의 변화 없이 각각의 컴포넌트 내에서 상태(State)를 관리하고 변경할 수 있기 때문에 React에 좀 더 직관적인 API를 제공할 수 있습니다.
클래스 컴포넌트의 라이프 사이클
보통 페이지의 렌더링 준비 과정에서 시작하여 페이지를 업데이트하고 페이지에서 사라질 때 끝나게 됩니다. 이를 초기화(Initialize) - 생성(Mounting) - 변경(Props change, State Change) - 소멸(Unmounting)의 4단계로 표현할 수 있습니다.
컴포넌트가 생성되고 사용된 후 소멸되는 과정에서 라이프 사이클 이벤트가 발생하게 되는데 해당 라이프 사이클이 발생했을 때 비동기적으로 사용자의 입력을 화면에 렌더링하거나 웹 서버와 통신하여 데이터를 조회하는 등의 업무를 처리할 수 있습니다.
→ Hook을 이용하면 함수 컴포넌트에서도 상태 관리(state)와 React의 기능(라이프 사이클 이벤트 등)을 사용할 수 있습니다.
세 번째, Hook은 클래스 컴포넌트 없이 React를 사용 가능하게 만듭니다.
클래스 컴포넌트는 함수 컴포넌트 보다 많은 기능을 가지고 있지만 코드가 길고 복잡합니다. 예를 들면 클래스는 this 키워드의 작동방식을 제대로 이해하지 못해 예상치 못한 오류를 만나곤 합니다. this는 상황에 따라 조작 및 변경이 가능하기 때문에 오류를 수정할 때도 함수형 컴포넌트와 달리 길고 복잡한 코드를 작성해야 합니다. 또한 클래스 컴포넌트는 페이지 생성 속도가 느립니다. Prepack 컴파일러를 활용해 클래스 컴포넌트를 테스트한 결과, 클래스 컴포넌트가 컴파일 속도를 느리게 만든다는 것을 확인할 수 있습니다.
이와 같은 클래스 컴포넌트의 문제를 해결하기 위해 함수 컴포넌트를 사용해야 합니다. Hook은 리액트에서 함수 컴포넌트를 보편적으로 사용할 수 있게 만드는 도구입니다. Hook이 나오기 전에는 state와 생명주기 기능을 사용할 수 없다는 이유로 함수 컴포넌트가 많이 쓰이지 못했지만 Hook의 등장 이후 함수 컴포넌트가 적극적으로 활용되었습니다. 화살표 함수를 사용하여 this를 바인딩하지 않아 코드의 간결함을 유지할 수 있고 깊은 컴포넌트 트리 중첩이 일어나지 않아 속도도 빨라졌습니다. 마지막으로 개념적 의미에서 리액트 컴포넌트는 함수에 가깝습니다. 함수를 지향하는 리액트 정신을 잇기 위해서도 Hook의 사용이 권장됩니다.
단어 컨벤션
리렌더링
React
Hook
Custom Hook
Library Hook
클래스 컴포넌트 & 함수 컴포넌트
예시는 ex.
생명주기
문장 컨벤션
들여쓰기 하지말기
이미지 안의 글자 크기는 노션 본문 글자 크기와 맞추기
피드백 모음
이 부분도 훅의 특징 부분처럼 목차 세분화하는 게 좋을까요??
혹시 "Prepack 컴파일러를 활용해 클래스 컴포넌트를 테스트한 결과" 이 부분은 직접 확인을 하신 부분일까요? → 출처표기하기
앞서 발표하신 hook의 정의와 겹치는 부분이 있는데 그 부분이 조금 걸렸어요 동어 반복의 느낌도 있어서 ㅠㅠ 한쪽을 정리하거나 뒷부분에서 '앞서 말했듯' 같은 연결어를 추가해서 끊기는 느낌이 안 났으면 좋겠읍니다 개인의 의견입니다
제 개인적인 생각으로는 클래스형 컴포넌트와의 비교가 좀 있는거 같은데 둘의 차이를 간단하더라도 코드 예시가 있었으면 좋겠습니다!
그리고 class컴포넌트 / 클래스 컴포넌트 용어 통일 이슈!!
앞 뒤, 발표와 글들을 읽으면서 느낀 생각인데요
글로만 써져있어서 이해하기 힘들다고 느껴집니다.
클래스 컴포넌트가 뭔지 리액트 함수형 컴포넌트가 뭔지 코드로 딱 나와있으면 뭔가 이해하기 쉬울것 같기도 하고요.
훅의 사용규칙 부분같은 곳에서는 올바른 Hook 호출 예제와 올바르지 않은 예제 같은것들을 넣어주는건 어떠실까요 ?
라이프사이클 설명할때도 순서를 나타내는 간단한 그림같은게 있어도 좋을 것 같습니다!