리액트 Hook 이란?

🤔 리액트 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은?

• 클래스형 컴포넌트: 라이프 사이클 메서드를 사용하고,
• 함수형 컴포넌트: Hook을 사용한다.

🤔 리액트 Hook 무엇이고 왜 쓰나요?

• Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수이다.
• Hook은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 사용할 수 있게 만드는 기능이다.
• Hook은 class 안에서는 동작하지 않는다. Hook은 Class없이 React 기능들을 사용하는 방법을 제시한다.
• Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.

Hook 장점

1. 재사용 가능한 로직을 쉽게 만들고 성능이 더 빨라진다.
2. 같은 로직을 한곳으로 모을 수 있어 가독성이 좋다.
3. 클로저에 의존적이다.

Hook 단점

1. 반복문, 조건문, 중첩된 함수내에서 호출할 수 없다.
2. useEffect가 라이프 사이클을 흉내내는 것이라서 빈틈이 있다.

예시) useState

출처 https://ko.legacy.reactjs.org/docs/hooks-overview.html

🤔함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요.

• 함수형 컴포넌트에서 ‘useEffect Hook’을 사용한다.
• useEffect Hook은 componentDidMount와 componentDidUpdate, componentWillUnmount의 라이프 사이클 메소드 모두가 합쳐진 것과 비슷하다.