후니의 개발 기록

이번 정비스프린트에 React 18로 버전업을 진행하였다.React 18로 되면서 실제 업무에서 활용될 수 있는 훅스를 정리하고 공부하기 위해 글을 작성했다.1. useDeferredValue💡useDeferredValue는 특정 ui의 업데이트를 지연시킬 수 있다. 사용법const deferredValue = useDeferredValue(value) 2. 실제 예시export default function App() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); return ( Search albums: setQuery(e.target.value)} /> ); } query는 기본 stat..

이번 스프린트 작업 중에 useRef를 사용하면서 ref를 통해 언제 DOM 요소에 접근하는지에 대해 명확한 이해가 되지 않았었습니다. 먼저 React의 동작을 크게 두 단계로 나누어 설명해보겠습니다. 렌더링 단계 (Rendering Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 이 단계에서는 Virtual DOM을 구성하고, 컴포넌트의 업데이트 여부를 판단합니다. 커밋 단계 (Commit Phase) 렌더링 단계에서 계산된 변경사항들을 실제 DOM에 적용하는 단계입니다. 💡 만약 렌더링 단계에 dom에 접근한다면 ? 첫 렌더링 시 DOM 생성 전: 실제 dom이 아직 생성되지 않았기에 ref.current의 값은 null이 됩니다. 업데이트 중 DOM 변경 전: 렌..