일단 Doit

조건부 사용시 가장 주의해야 할 점은 반드시 조건부 Rendering이 발생하는 컴포넌트가 아니 해당 컴포넌트를 사용하는 곳에서 조건부를 결정해야 한다는 것입니다. 말이 어려운데 간단한 샘플을 보겠습니다. 1. 동적 로딩이 불가합니다. - 먼저 동적로딩에 대해 알아봅시다. https://ko.reactjs.org/docs/code-splitting.html 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 해당 컴포넌트를 초기 로딩하지 않고 사용할때 로딩하여 초기 속도를 향상시키는 목적으로 사용합니다. 하지만, 해당 컴포넌트에 대한 조건부 Rendering을 안에 두면 무조건 초기 로딩해야 합니다. const Po..

React 2023. 3. 1. 21:29

React로 Page를 개발하는데, Rendering이 두번씩 실행되는 경우가 있다. 한참을 코드 분석해도 원인을 알수 없다가, 우연히 해결했는데... 바로 Strict 모드 !! const StyledPage = () => { console.log('Rendering'); return ( styled-components 버튼1 버튼2 ); }; export default StyledPage; console을 찍으면 두번씩 호출 index.js - Strict 모드 주석처리 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( // // ); console이 한번으로 줄었다. 그렇다고, Strict Mode를 사용하..

React 2023. 1. 20. 16:52