React Hooks란?
React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리
React Hook 개발 과정
- 클래스 컴포넌트 사용
-- 2019년 2월 데이터 캐시 개발 --
- 함수 컴포넌트와, 리액트 훅 사용
( 리액트 훅은, 함수 컴포넌트에서만 사용가능하다 )
함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다.
이 캐시를 이용하고자 만든 여러개의 API를 '리액트 훅' 함수라고 부른다.
React Hook의 필요성
함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.
함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 ( why? )
서로의 장점을 전부다 가지고 있다.
React Hooks 사용규칙
같은 Hook을 여러번 호출할 수 있다.
export default function App(){
const [value1, setValue1] = useState()
const [value2, setValue2] = useState()
return {
<div>
<div>{value1}</div>
<div>{value2}</div>
</div> }
}
함수 컴포넌트 몸통이아닌, 몸통 안 복합 실행문의 {}에서는 사용할 수 없다.
javascript의 block scope는, block 외에서 사용할 수 없으므로 ( 지역변수이기 때문에 )
export default function App(){
return {
<div>
// 불가능
<div>{const [value, setvalue] = useState()}</div>
</div> }
}
비동기 함수(async 키워드가 붙은 함수)는 콜백함수로 사용할 수 없다.
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
의존성 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다. ( 재랜더링시 정의 안함 )
8. useLayoutEffect
모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있다.
9. useDebugValue
사용자 정의 Hook의 디버깅을 도와준다.
