React Hooks란 무엇인가? (설명 , 사용법)

출처:https://defineall.tistory.com/900#toc1(MOONCO)님의 글 입니다!

🪄React Hook란?

 

React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이 , State와 여러 React 기능을 사용할 수 있도록 만드는 라이브러리

---

🪄React Hook 개발과정

 

1. 클래스 컴포넌트 사용

2. 함수 컴포넌트 와 리액트 훅 사용

(리액트 혹은, 함수 컴포넌트에서만 사용가능하다)

---

함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다

 

이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 이라고 한다.

---

React Hook 의 필요성

---

함수 컴포넌트도 클래스 컴포넌트 처럼 사용할 수 있따

 

함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기 쉬우므로 서로의 장점을 전부다 가지고 있다

---

🪄React Hooks 사용 규칙

 

같은 Hook을 여러번 호출 할 수 있다

export default function App(){
  const [value1, setValue1] = useState()
  const [value2, setValue2] = useState()
  return {
    <div>
      <div>{value1}</div>
      <div>{value2}</div>
    </div>
  }
}

 

const [ 기존 value, 바뀐 value] = useState()

 

(여기서 나에게 중요한 것을 안에 들어갈 value의 명칭을 분명히 하고 겹치지 않게 한다)

---

함수 컴포넌트 몸통이아닌, 몸통 안 복합 실행 문의 {} 에서 사용할 수 없다

javascript의 block scope는, block 외에서 사용할 수 없다

 

export default function App(){
  return {
    <div>
      // 불가능
      <div>{const [value, setvalue] = useState()}</div>
    </div>
  }
}

---

비동기 함수(asnyc 키워드가 붙은 함수) 는 콜백 함수로 사용 할 수 없다

export default function App(){
  // useEffect Hook 내부에, 비동기 함수가 들어가므로 에러 발생
  useEffect(async () => {
    await Promise.resolve(1)
  }, [])
  
  return {
    <div>
      <div>Test</div>
    </div>
  }
}

 

---

🪄React에서 기본적으로 지원하는 Hooks

 

1. useState

 

컴포넌트의 state(상태)를 관리 할 수 있다.

 

상태에 따라 , 다른 화면 출력

 

2. useEffect

 

렌더링 이후에 실행 할 코드를 만들 수 있다

 

어떤 변수가 변경될때마다(의존성), 특정 기능이 작동하도록 할 수 있다.

 

3. useContext

 

부모 컴포넌트와 자식 컴포넌트 간의 변수와 함수를 전역적으로 정의 할 수 있다

 

4. useReducer

 

State(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다.

 

5. useRef

 

컴포넌트나 HTML 요소를 래퍼런스로 관리 할 수 있다.

 

6. forwardRef

 

useRef로 만든 래퍼런스를 상위 컴포넌트로 전달 할 수 있다.

 

7.useimperativeHandle

 

useRef로 만든 래퍼런스의 상태에 따라, 실행 할 함수를 정의 할 수 있다

 

8. useMemo, useCallback

 

의존성 배열에 적힌 값이 변할 때만 값, 함수를 다시 정의 할 수 있다( 재 랜더링 시 정의 안함)

 

9. useDebugValue

 

사용자 정의 Hook의 디버깅을 도와준다

 

---