[1. useRef]
useState와 유사하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 가진다.
하지만 useState와 달리 반환 값인 객체 내부에 있는 current로 값에 접근 / 변경할 수 있고 값이 변해도 렌더링을 트리거하지 않는다.
useRef는 상태값을 저장하고 싶지만 렌더링을 원하지 않을 때 사용할 수 있다.
ex) 값이 자주 바뀌지만 렌더는 많이 필요없는 데이터
[2. useLayoutEffect]
useEffect와 유사하지만 useEffect는 렌더링 후에 비동기적으로 호출이 발생하고 useLayoutEffect는 렌더링 전에 동기적으로 호출이 일어난다.
렌더링이 시작되기 전 값을 동기화하기 때문에 렌더 후 함수를 실행하는 useEffect와 달리 reflow, repaint가 일어날 수 없다.
useEffect를 사용하면 renderTree 생성 후 호출되기 때문에 DOM 노드의 레이아웃이 바뀌면 다시 reflow, repaint 과정이 발생하기 때문에 화면에 깜빡임이 있을 수 있다.
이럴 경우 useLayoutEffect를 사용하면 화면 깜박임을 막을 수 있다.
하지만 항상 useLayoutEffect 작업이 끝난 후 렌더링 작업을 수행할 수 있기 때문에 성능 저하에 유의해야 한다.
[3. useImperativeHandle]
부모에게서 넘겨받은 ref를 수정할 수 있게 한다.
상위 컴포넌트에서 많은 핸들러와 함수 등을 작성해 하위 컴포넌트로 전달하는 경우 코드를 간결하게 만들 수 있다(?)
사용을 지양하는 훅이라고 한다....
react는 state를 활용해 ui를 변경하는 선언형 프레임워크인데 ref를 사용하는 순간 명령형 프로그래밍 구조가 되어 서로 맞지 않고,
ref와 state를 따로 선언하면 서로 다른 값을 가리키고 있을 경우가 있다 한다.
[4. useDebugValue]
리액트 개발 도구에 커스텀 훅에 대한 정보를 표시해주고 싶을 때 사용한다.
훅 내부에서만 실행할 수 있다.
두번째 인자로 포매팅 함수를 전달하면 첫번째 인자에서 변화가 일어날 때 호출한다.
배포한 패키지, 라이브러리 등의 디버깅 정보를 제공할 때 사용하는 것이 좋다.
[5. useTransition]
// 추가 예정
[1. useRef]
useState와 유사하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 가진다.
하지만 useState와 달리 반환 값인 객체 내부에 있는 current로 값에 접근 / 변경할 수 있고 값이 변해도 렌더링을 트리거하지 않는다.
useRef는 상태값을 저장하고 싶지만 렌더링을 원하지 않을 때 사용할 수 있다.
ex) 값이 자주 바뀌지만 렌더는 많이 필요없는 데이터
[2. useLayoutEffect]
useEffect와 유사하지만 useEffect는 렌더링 후에 비동기적으로 호출이 발생하고 useLayoutEffect는 렌더링 전에 동기적으로 호출이 일어난다.
렌더링이 시작되기 전 값을 동기화하기 때문에 렌더 후 함수를 실행하는 useEffect와 달리 reflow, repaint가 일어날 수 없다.
useEffect를 사용하면 renderTree 생성 후 호출되기 때문에 DOM 노드의 레이아웃이 바뀌면 다시 reflow, repaint 과정이 발생하기 때문에 화면에 깜빡임이 있을 수 있다.
이럴 경우 useLayoutEffect를 사용하면 화면 깜박임을 막을 수 있다.
하지만 항상 useLayoutEffect 작업이 끝난 후 렌더링 작업을 수행할 수 있기 때문에 성능 저하에 유의해야 한다.
[3. useImperativeHandle]
부모에게서 넘겨받은 ref를 수정할 수 있게 한다.
상위 컴포넌트에서 많은 핸들러와 함수 등을 작성해 하위 컴포넌트로 전달하는 경우 코드를 간결하게 만들 수 있다(?)
사용을 지양하는 훅이라고 한다....
react는 state를 활용해 ui를 변경하는 선언형 프레임워크인데 ref를 사용하는 순간 명령형 프로그래밍 구조가 되어 서로 맞지 않고,
ref와 state를 따로 선언하면 서로 다른 값을 가리키고 있을 경우가 있다 한다.
[4. useDebugValue]
리액트 개발 도구에 커스텀 훅에 대한 정보를 표시해주고 싶을 때 사용한다.
훅 내부에서만 실행할 수 있다.
두번째 인자로 포매팅 함수를 전달하면 첫번째 인자에서 변화가 일어날 때 호출한다.
배포한 패키지, 라이브러리 등의 디버깅 정보를 제공할 때 사용하는 것이 좋다.
[5. useTransition]
// 추가 예정
