10 React Hooks

 

아래 유튜브 영상 정리한 내용입니다.

 

https://www.youtube.com/watch?v=TNhaISOUy6Q

 

 

Basic Hooks

useState: Re-render the UI when data changes.

// 순서대로 Reactive value, setter function, initial state
const [count, setCount] = useState(0)

 

상태 변수를 생성하고 업데이트하는 Hook. 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 예를 들어, 사용자 입력값이나 UI 상태 등을 저장할 때 사용한다.

 

useEffect: Run when mounted or when state changes. also can make it run before component is removed from UI.

useEffect(
	() => {
    	fetch('foo').then(() => setLoaded(true))
        },
        [] //dependencies it's empty therefore only run once
)

useEffect(
	() => {
    	fetch('foo').then(() => setLoaded(true))
        },
        [count] //run when count changes
)

 

사이드 이펙트를 처리하는 Hook. 데이터 페칭, DOM 조작, 구독/해제 등을 수행한다. 컴포넌트가 마운트되거나 업데이트될 때 특정 작업을 실행할 수 있다.

useContext: 전역 상태를 관리하는 Hook. 컴포넌트 트리 전체에서 데이터를 전달할 때 사용한다. props를 통해 데이터를 전달하지 않아도 되기 때문에 코드가 간결해진다. share data without passing props. consume value from nearest parent provider.

 

 

Additional Hooks

useRef: 참조를 생성하는 Hook. DOM 요소나 변수 등을 참조할 때 사용한다. 값이 변경되어도 렌더링에 영향을 미치지 않는다. mutable value does NOT re-render UI

 

useReducer: 복잡한 상태 로직을 관리하는 Hook. useState의 대안으로, 상태와 상태를 업데이트하는 로직을 분리할 때 유용하다. 주로 여러 상태를 갖는 복잡한 컴포넌트에서 사용한다.

//상태 변수, 업데이트될 변수, 적용할 함수(미리 정의), initial state
const [state, dispatch] = useReducer(reducer, 0)

 

++

 

++ 근데 Recoil이 버려진 것 같다는 의견이 있네... 아니 버려진거맞는듯 해고당했다는데요? zustand나 zotai를 쓰라고함

 

useMemo: 메모이제이션된 값을 생성하는 Hook. 연산 비용이 큰 계산의 결과를 저장하여 성능을 최적화한다. 특정 값이 변경되었을 때만 재계산한다. memoization cache result of function call. CAUTION! please use only as needed for expensive calculations. 꼭 모든 걸 최적화할 필요는 없다.

 

useCallback: memoization entire function. 메모이제이션된 콜백을 생성하는 Hook. 함수형 컴포넌트가 렌더링될 때마다 동일한 함수가 생성되는 것을 방지한다. 성능 최적화를 위해 사용한다.

useImperativeHandle: 부모 컴포넌트가 자식 컴포넌트의 인스턴스 메서드를 사용할 수 있게 하는 Hook. 주로 외부 라이브러리와 통합하거나 특정 상황에서 자식 컴포넌트의 내부 메서드에 접근할 필요가 있을 때 사용한다.

위 설명은 너무 어렵고 그냥 modify the exposed ref 하지만 rare use-case.

 

useLayoutEffect: DOM 업데이트 직후에 동기적으로 실행되는 Hook. 화면이 그려지기 전에 DOM을 읽거나 수정해야 하는 경우에 사용한다. useEffect와 달리, 렌더링 후 바로 실행된다. useEffect와 다 똑같은데 runs after render but before painting to screen. CAUTION! blocks visual updates until your callback is finished.

useDebugValue: 디버깅 정보를 제공하는 Hook. 커스텀 Hook을 디버깅할 때 유용하며, React DevTools에서 표시할 값을 설정할 수 있다. Custom Hook 작성할 때 useDebugValue 추가해주면 됨.

// custom hook 예시
function useDisplayName() {
	const [displayName, setDisplayName] = useState()
    
    useEffect(() => {
    	const data=fetchFromDatabase(props.userId)
        setDisplayName(data.displayName)
    }, [])
    
    //displayName은 개발자 도구에서 볼 수 있는 이름
    useDebugValue(displayName ?? 'loading...')
    
    return displayName
}

 

커스텀 Hook을 만드는 이유는 코드의 재사용성과 가독성을 높이기 위해서.

React 애플리케이션을 개발하다 보면 여러 컴포넌트에서 동일한 로직이나 상태 관리가 필요할 때가 많다. 이러한 중복 코드를 커스텀 Hook으로 분리

 

 

 

재밌다아아아아아아아아

 

 

 

+

딴 얘긴데 그냥 리액트 관련

한번에 이해되는 설명을 봐서 추가한다.

바닐라 자바스크립트는 명령하고(imperative) 리액트는 선언한다(declaritive)

 

+

이런 글이 있네

https://dev.to/usulpro/how-react-forget-will-make-react-usememo-and-usecallback-hooks-absolutely-redundant-4l68

How React Forget will make React useMemo and useCallback hooks absolutely redundant

 

이 글을 찾게 된 건 아래 영상 때문이다.

https://www.youtube.com/watch?v=4k6Xgjqkad4

 

근데 이 영상에서도 결국 모든 프레임워크들이 닮아간다, 결국은 Angular다 이런얘기하는데 좀 맞긴 맞는듯...ㅋㅋ

아니 hook 좋은데 왜? ㅎㅎ

아무튼 Forget이라는 게 제대로 완성돼서 나오면 내가 열심히 공부한 useMemo나 useCallback을 쓸 일이 없을 거라는게 글의 요지다. Forget이 그걸 자동으로 해줄 것이기 때문

리액트 Forget은 메모이제이션 과정을 자동화하여 이 문제를 완화하는 것을 목표로 합니다. 컴포넌트 수준에서 반응성을 최적화하는 자동 반응 컴파일러가 있는 것과 같습니다. 상태 값이 의미 있게 변경될 때만 애플리케이션이 다시 렌더링되도록 보장합니다.

 

하참나..

리액트가 사실 천재인데 일부러 빙글빙글 돌아가는거라는말 진짜 타당해보임 이제

 

 

 

++

이것도 한눈에 보기 좋아보인다.

 

출처: https://www.youtube.com/watch?v=LOH1l-MP_9k