Hooks (6) 썸네일형 리스트형 [React hooks] 리액트 훅의 원리 : 단지 배열일 뿐 리액트 훅이 배열임임을 알아봅니다. 원문 : https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e React hooks: not magic, just arrays Untangling the rules around the proposal using diagrams medium.com 저는 새로운 hooks API의 열렬한 팬입니다. 그러나 어떻게 사용해야 하는지에 대한 몇 가지 이상한 제약(odd constraints)이 있습니다. 여기에서는 이러한 규칙의 이유를 이해하는 데 어려움을 겪는 사람들을 위해 새 API 사용에 대해 생각하는 방법에 대한 모델을 제시합니다. 훅이 어떻게 동작하는지 알아보기 훅의 규칙 React 핵심.. [3분 리액트] React18의 useInsertionEffect 훅에 대해 알아보자 원문 : https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect Know about the useInsertionEffect hook in React 18 Ruby on Rails and ReactJS consulting company. We also build mobile applications using React Native blog.saeloun.com TLDR : useInsertionEffect는 useLayoutEffect가 동작하기 전에 스타일을 먼저 조작하게 해주는 훅이다. css 라이브러리를 개발하는 케이스거나 특이 케이스가 아니면 볼일 없으실듯... React 18은 동시 렌더링을 위한 기반을 제공합니다. 사용자가 React의.. useState에 대해 좀 더 잘 알아보기 #3: Things to know about useState #4: useState for one-time initializations 두 게시물을 짬뽕해서 정리함. 1. 함수형 업데이터 클로저를 사용하여 setState 함수를 호출할 시, 배치 처리되는것 같은 느낌을 줍니다. 이는 우리의 의도와 다를 수 있습니다. 함수형 업데이터는 매 setState호출마다 이전 호출 결과 상태를 사용할 수 있게 해줍니다. 기존 클로저를 사용한 업데이트 : 결과는 항상 1 증가합니다. function App() { const [count, setCount] = React.useState(0) return ( { setCount(count + 1) setCount(count + 1) }} > 🚨 This will not.. [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] 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.. 이전 1 다음
