https://react-ko.dev/learn/lifecycle-of-reactive-effects effect는 컴포넌트가 마운트 된 상황에서 여러번 실행하고, clean up을 수행할 수 있다. 의존하는 props, state가 변경될때 clean up 수행 후 새로운 props, state로 effect 수행 ...
Updating objects, array in state
https://react.dev/learn/updating-objects-in-state https://react.dev/learn/updating-arrays-in-state object, array 변경시 보통 spread 연산자를 사용한다. 기존 객체의 mutate를 막고, 새로운 객체로 업데이트 해주어야함. ```js // BAD :...
State as a snapshot
https://react.dev/learn/state-as-a-snapshot 요약 💡 상태(State) 변수는 일반적인 JavaScript 변수처럼 읽고 쓸 수 있는 변수로 보이지만, 상태는 스냅샷과 유사한 방식으로 작동합니다. 상태를 설정하면 이미 가지고 있는 상태 변수가 변경되는 것이 아니라, 다시 렌더링을 트리거합니다. 사실 상태를 설...
Render and commit
https://react.dev/learn/render-and-commit 리액트는 두가지 렌더링을 한다 최초 렌더링 리렌더링 리렌더링은 상태가 업데이트 되었을때 업데이트 된 컴포넌트만 수행한다. 이때 재귀적으로 말단 노드까지 업데이트를 진행한다. 업데이트는 ...
Queueing a series of state updates
https://react.dev/learn/queueing-a-series-of-state-updates 요약 🔍 React는 상태 업데이트를 배치 처리하여 여러 상태 업데이트를 효율적으로 처리하며, 상태 업데이트를 여러 번 연속으로 수행하는 방법에 대해 배웁니다. 사실 📚 React는 상태 업데이트를 배치 처리하여 여러 업데이트를 효율적으로...
제어 컴포넌트
구 가이드 : https://ko.legacy.reactjs.org/docs/forms.html#controlled-components 요약 이 문서는 React의 폼 엘리먼트 사용에 대한 설명을 제공하며 제어 컴포넌트를 활용한 방법을 소개합니다. 사실 - 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다....
재조정
구 가이드 : https://ko.legacy.reactjs.org/docs/reconciliation.html 신 가이드 : https://react.dev/learn/preserving-and-resetting-state 동기 하나의 트리를 다른 트리로 변환하기 위한 최소한의 연산은 O(n^3) 리액트에서는 다음 두가지의 가정...
성능 최적화
구 가이드 : https://ko.legacy.reactjs.org/docs/optimizing-performance.html 긴 목록을 가상화하여 성능을 향상시키는 방법 react-window와 react-virtualized 라이브러리를 활용하여 ‘windowing’ 기법을 적용하여 목록을 렌더링합니다. 재조정 피하기 Rea...
Strictmode
구 가이드 : https://ko.legacy.reactjs.org/docs/strict-mode.html 신 가이드 : https://react.dev/reference/react/StrictMode 요약 StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. StrictMode는 개발 모드에서만 활성되...
Refs for dom
구 가이드 : https://ko.legacy.reactjs.org/docs/forwarding-refs.html 신 가이드 : https://react.dev/learn/manipulating-the-dom-with-refs 요약 React는 렌더 출력과 DOM을 자동으로 일치시켜주므로 컴포넌트가 DOM을 직접 조작할 필요가 없습니다. ...