[ React-Hooks ] Hooks란 무엇인가

Hooks란 무엇인가?

Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.

Hooks의 종류

1.useState

• useState는 가장 기본적인 Hook으로서 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해 줍니다 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook을 사용할 수 있습니다

2.useEffect

• useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다

3.useContext

• 이 Hook를 사용하면 함수형 컴포넌트에서 Context를 보다 더 쉽게 사용할 수 있습니다

4.useReducer

• useReducer는 useState 보다 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사합니다
• 현제 상태, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수 반드시 불변성을 지켜줘야 합니다
• 첫밴째 인자로 reducer 함수를 받고 두 번째 인자로 해당 리듀서의 기본값을 넣어줍니다

5.useMemo

• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
• 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이 입니다 

6.useCallback

• useCallback 은 useMemo와 상당히 비슷한 함수이고 주로 렌더링 선능을 최적화해야 하는 상황에서 사용하는데 이 Hook을 상용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다
• 첫 번째 인자에는 생성하고 싶은 함수를 넣고 두 번째 인자에는 배열을 넣습니다 이 배 열애는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 합니다
• 함수 내부에서 상태 값에 의존해야 할 때는 그 값이 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다

7.useRef

• useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 줍니다 

8. 커스텀 hook

• Hook은 원하는 대로 커스터마이징 할 수가 있습니다
• 다른 개발 자들의 다양한 커스텀 Hook
• https://nikgraf.github.io/react-hooks/
• https://github.com/rehooks/awesome-react-hooks

rehooks/awesome-react-hooks

 

출처 :리액트를 다루는 기술 - 개정판