Hooks

🪝Hooks란

갈고리를 걸어 원하는 시점에 정해진 함수를 쓰도록 하는 것

훅 앞에 요지를 달아 내줘야한다

useState: state를 사용하기 위한 Hook

useEffect()

Side effect를 사용하기 위한 hook

• size effect = 효과, 영향
• 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문
• 리액트의 함수 컴포넌트에서 Side effect를 실행할 수 있게 해주는 Hook

의존성 배열의 값 중 하나라도 바뀐다면 실행한다.

useMemo()

Memoized value를 리턴하는 Hook

Memoization: 연산량이 많은 데이터를 미리 저장해놓고 가져와서 쓰게 하도록 하는 것... (최적화)

랜더링이 일어나는 경우에만 실행된다.
서버에서 데이터를 가져오거나 변경하는 것은 넣으면 안된다. useEffect()훅에 넣어야한다.

useCallback()

useMemo() Hook과 유사하지만 값이 아닌 함수를 반환

"함수를 반환한다."

useRef

Reference를 사용하기 위한 Hook

레퍼런스: 특정 컴포넌트에 접근할 수 있는 객체
ref.Object.current(현재 참조하고 있는 레퍼런스)

매번 랜더링할 때마다 같은 객체를 반환한다.

useRef() Hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다!

Callback ref을 사용하자.

자식 컴포넌트가 변경되었을 때 알림을 받을 수 있고, 그에 따라 수정할 수 있다.

Hook의 규칙

1. Hook은 무조건 최상위 레벨에서만 호출해야 한다.

컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 한다.

2. 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.

eslint-plugin-react-hooks 플러그인: 리액트 컴포넌트가 훅의 규칙을 따르고 있는지 알려준다.

Custon Hook 만들기

여러 컴포넌트에서 사용되는 로직을 훅으로 만들어 쓰기 위해서 만든다.

Custon Hook 추출하기

이름이 use로 시작하고 내부에서 다른 hook을 호출하는 하나의 자바스크립트 함수

특별한 규칙이 있진 않음. 함수랑 같긴한데 use를 앞에 붙여줘야한다. 그리고 훅의 2가지 규칙도 적용된다.

Custon Hook 사용하기

Custom Hook의 이름은 꼭 use로 시작해야한다!
여러 개의 컴포넌트에서 하나의 Custon Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.

각 Custom Hook 호출에 대해 분리된 state를 얻게 됨!

각 Custom Hook의 호출 또한 완전히 독립적이다.

Hook들 사이에서 데이터를 공유하는 방법