[React] 리액트 훅이란? (React Hooks)

1. React Hooks란?

리액트 훅은 리액트 클래스형 컴포넌트에서만 가능했던 상태 관리와 생명주기 관련 작업을 코드를 작성할 필요없이 함수형 컴포넌트에서도 사용할 수 있게 해주어서 코드를 간결하게 작성하고 개발과 유지보수를 더 쉽게 해주는 것이다.
React 16.8 버전에서 새로 추가된 기능이다.

2. Hook 규칙

• 리액트 훅은 함수형 컴포넌트 내에서만 사용해야 하며 클래스형 컴포넌트나 일반 자바스크립트 함수 내에서는 사용할 수 없다.

• 훅을 호출하는 순서는 항상 동일해야 한다. 즉, 조건문, 반복문, 중첩 함수 등 내부에서 훅을 호출하면 안된다. (해당 부분을 건너뛰어 순서가 꼬여서 에러가 발생할 수 있음)

• 조건부로 훅을 호출하는 것은 지양해야 하며 항상 컴포넌트의 최상위 레벨에서 호출되어야 한다.

3. 자주 사용하는 React Hook 알아보기

1) useState:

• 함수형 컴포넌트에서 상태를 추가하고 관리할 수 있게 해주며 컴포넌트의 상태를 변경할 때마다 리렌더링된다.
• useState 훅을 사용하여 상태와 해당 상태를 업데이트하는 함수를 선언한다.
• 상태 변수와 상태 업데이트 함수를 배열로 반환하며, 배열의 첫 번째 요소는 상태 변수이고, 두 번째 요소는 상태를 업데이트하는 함수이다.
• state는 문자열, 숫자, 배열, Null 등 여러가지 데이터 타입을 넣을 수 있다.

2) useEffect:

• 함수형 컴포넌트에서 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)의 역할을 수행한다.
• 컴포넌트가 렌더링될 때, 상태가 변경될 때, 혹은 컴포넌트가 사라질 때 등에 특정 작업을 수행한다.
• useEffect(function, deps)의 형태를 사용한다.
• function에는 특정 작업을 수행하는 함수를 정의한다.
• 두번째 매개변수로 의존성 배열을 전달하여 해당 값이 변경될 때마다 특정 작업을 수행한다.
• 의존성 배열이 빈배열일 경우에는 첫 렌더링 시에만 함수를 실행한다.
• 언마운트시에 cleanup 함수를 적용시킬 수 있다.
  cleanup 예시
  

3) useRef:

• DOM 요소나 다른 값을 참조할 수 있도록 해준다.
• 객체를 생성하고 해당 객체의 current 프로퍼티를 통해 값을 읽거나 변경할 수 있다.
• useRef 훅을 사용하여 참조 객체를 생성하고, current 프로퍼티를 통해 해당 값에 접근한다.

4) useContext:

부모 컴포넌트로부터 데이터를 전달받을 수 있도록 해주며 주로 전역 상태 관리를 위해 사용된다.
useContext 훅을 사용하여 컨텍스트 객체를 가져온 후 해당 컨텍스트의 값을 읽거나 업데이트할 수 있다.

참고 블로그