REACT (187) 썸네일형 리스트형 8. 커스텀 훅 테스트 https://github.com/kentcdodds/testing-react-apps.git TLDR : 훅은 구현상세다. 훅은 리액트 컴포넌트 내에서 호출해야한다. 즉, 훅의 동작은 컴포넌트의 상태 반영을 통해서만 테스트 가능하다. 사용자는 컴포넌트에만 관심있다. 즉 훅은 구현 상세이므로, 테스트를 지양해야 한다. 공통 훅을 만들어 라이브러리로 제공하는 경우가 아니면... 1. 가장 기본적인 테스트 딱히 구현을 보여주지 않아도 어떤 테스트인지 알 수 있다. function UseCounterHookExample() { const {count, increment, decrement} = useCounter() return ( Current count: {count} Decrement Increment .. 제어의 역전(IOC : Inversion of Control) in React 원문 보기 사용 중인 루틴에 기능을 추가해달라는 요청을 받게 되면? 리액트 컴포넌트는 props를 추가하고, 리액트 훅은 argument를 추가할 것이다. 구현 로직은 점점 복잡해진다. 이같은 조치는 다음 문제들을 야기하기 쉽다 성능 이슈 : 코드 사이즈 증가 유지보수 문제 : 한가지 함수가 여러 기능을 하면 수정 유발 원인이 많다. 구현의 어려움 : 조건문은 자주 다른 조건들과 같이 바뀜. 수정 포인트가 많이 발생함. API의 복잡성 : props, argument, option 등의 플래그가 너무 많으면, 나중에 안쓰이는게 분명 발생함. 문서화도 어려움 변화에 최적화하라 Inversion Of Control API는 추상화를 이용하여 로직을 적게 구현하고, 대신 사용자의 코드를 실행한다. 플래그를 이.. [Epic React] Errorboundary로 선언적 에러 핸들링 왜 ErrorBoundary를 쓰나요 선언적 에러 핸들링 자바스크립트 런타임 에러와 비동기 에러를 동시 처리 하위 컴포넌트 에러를 상위 컴포넌트에서 처리 사용방법 1 : 직접 구현하기 에러바운더리는 현재 클래스 컴포넌트만 사용할 수 있음 1. 에러바운더리 컴포넌트 만들기 static getDerivedStateFromError 메소드를 구현함. (error) 꺼내옴 props의 FallbackComponent에 error를 전달후 렌더링 에러 없으면 children 렌더링 class ErrorBoundary extends React.Component { state = {error: null} static getDerivedStateFromError(error) { return {error} } rende.. [Epic React] async 훅 사용 시 하나의 state를 사용하는 이유 state / loading / error 각각 다른 상태로 만들 경우. 데이터를 세팅하고 상태를 업데이트 하는 순서를 지키지 않으면 오류가 발생한다. (상태는 바뀌었으나 데이터가 없으면 오류 발생) // useEffect hooks... React.useEffect(() => { if (!pokemonName) { return } setStatus('pending') fetchPokemon(pokemonName).then( pokemon => { setPokemon(pokemon) setStatus('resolved') }, error => { setError(error) setStatus('rejected') }, ) }, [pokemonName]) // ... jsx part if (status =.. [Epic React] useCallback과 안전한 비동기 훅 만들기 대충 만든 비동기 훅을 호출하고 렌더링 전 뒤로가기를 누르면 콘솔에 해당 로그가 나온다. 가비지 컬렉팅 전, 컴포넌트가 버츄얼 돔 상에 없어도 상태 업데이트를 시도할 수 있다. 해당 문제를 막으면서 useCallback을 공부해보자 1. useCallback은 언제 쓰는가. React.memo 사용 렌더링 최적화시 props로 동일 객체 넘겨주기 의존성 배열에 상태 변화 없음을 알려주기 2. Let's Coding 1. unmount된 컴포넌트의 상태 업데이트를 막는 훅을 보자 주석은 useLayoutEffect를 사용하란 의미다. (LayoutEffect가 더 먼저 실행된다.) function useSafeDispatch(dispatch) { const mountedRef = React.useRef(f.. [Epic React] useDebug으로 custom hook debugging TLDR : useDebug는 커스텀 훅을 디버깅하기 위한 수단임. mediaQuery에 따라 반응하는 컴포넌트를 만들어 보자. mediaQuery가 적용되는지를 체크하는 훅. return true / false function useMedia(query, initialState = false) { const [state, setState] = React.useState(initialState) const formatDebugValue = React.useMemo(({query, state}) => `\`${query}\` => ${state}`,[]) React.useDebugValue({query, state}, formatDebugValue) React.useEffect(() => { let mou.. [Epic React] useLayoutEffect, useImperativeHandle, forwardRef useLayoutEffect When? DOM에 (직접) 관찰 가능한 변경을 가하여 브라우저가 업데이트된 dom 페인트해야 하는 경우 LayoutEffect를 사용합니다. 포커싱, 스크롤(top, bottom 이동) 그 외 전부 useEffect function MessagesDisplay({messages}) { const containerRef = React.useRef() // update, unmount시마다 호출 React.useLayoutEffect(() => { containerRef.current.scrollTop = containerRef.current.scrollHeight }) return ( {messages.map((message, index, array) => ( {message.. useEffect는 라이프사이클 훅이 아니다. Myths about useEffect | Epic React by Kent C. Dodds Myths about useEffect Some common mistakes I see people make with useEffect and how to avoid them. epicreact.dev TLDR : useEffect는 deps의 상태들과 사이드이펙트를 동기화하기 위한 훅이다. 처음에 리액트를 학습하면 클래스 컴포넌트와 라이프사이클에 대해 배운다. 라이프사이클 함수는 보통 내 코드를 다른사람의 코드 안에 끼워넣는 방법이다. 해당 정보를 의식하고 클래스 컴포넌트처럼 코딩하면 아래처럼 된다. function DogInfo({dogId}) { const controllerRef = React.useRef.. 이전 1 ··· 20 21 22 23 24 다음
