반응형 React40 [React] 렌더링 배치, 리렌더링 최적화 기초 ⚡️ 리액트의 렌더링 배치 리액트는 상태 변경을 감지해 렌더링 과정이 작동하여 변경사항을 반영합니다. 이러한 점은 상태변경에 대해 매번 렌더링 과정을 거치기엔 많은 리소스가 요구되기 때문에 리액트 18버전부터 여러 상태 변경을 묶어 batching(일괄) 처리 하여 리렌더링 하는 개념이 강화되었습니다. 이 개념을 몰랐을 때 API 호출을 위한 하나의 파라미터 상태 변경을 연관성(시간, 장비, 상태 등) 별로 묶은 컴포넌트에 위임해서 사용했는데, 여러 컴포넌트에서 하나의 상태를 변경하다보니 배치 타이밍을 조율하지 못해 API가 여러번 호출 됐던 경험이 있어 최적화 측면에서는 정말 중요한 개념이라 생각합니다. 그럼 어떻게 리액트가 상태 변경을 배치 처리 하는지 알아보겠습니다. 📌 상태 변경 배치 처리 con.. 2023. 2. 11. [React + Recoil] 재사용 전역 모달 만들기 ⚡️ Recoil로 전역 모달 만들기리액트로 모달 만들기 귀찮으신 분들은 다음 글 참고하셔서 라이브러리로 순식간에 모달 구현 해보세요![React] 세상 쉬운 리액트 모달 라이브러리첫 프로젝트에서는 아래 코드와 같이 각각의 모달마다 상태와 추가 코드를 작성했습니다.const [ modal1, setModal1 ] = useState({onOff: false})const [ modal2, setModal2 ] = useState({onOff: false})return ( { modal1.onOff && } { modal2.onOff && } )이와 같이 코드를 작성하다보니 초기에는 괜찮았지만모달의 개수가 많아질수록 관리해야 할 상태들과 추가 코드들이 점차 불어나 관리가 힘들 지경이 되었.. 2023. 2. 6. [React] 조건부 렌더링 (Conditional Rendering) ⚡ 조건부 렌더링 (Conditional Rendering)조건부 렌더링이란 리액트에서 조건에 따라 엘리먼트를 렌더링하는 것을 의미합니다.조건부 렌더링을 사용하는 경우는 많겠지만 제가 주로 사용했던 용도는 다음과 같습니다.인증, 인가에 따라 렌더링모달 ON/OFF비동기 데이터 참조 시 타입을 보장하여 안전하게 접근 및 로딩 처리 그럼 조건부 렌더링과 목적에 따른 사용 방법 예시를 알아보겠습니다. 📌 사전 준비 코드// 3초 후 return 하는 비동기 함수 const promiseFun = async () => { await new Promise((resolve) => setTimeout(resolve, 3000)); return 'JANG'; }; const Component = ({ name }: {.. 2023. 1. 23. [React] 리액트와 불변성 ⚡️ 시작하기 전자바스크립트나 리액트를 학습할 때 불변성에 대한 이야기는 꾸준하게 등장합니다.값이나 상태는 불변성을 항상 유지해야한다거나… 리액트에서 불변성이란 특성 때문에 객체의 프로퍼티만 수정하면 변경이 감지가 안된다거나…뭔지 알고싶지 않아도 어느순간 기본적인 곳에 계속해서 문제가 생겨 부딪힐 수 밖에 없습니다.그럼 자바스크립트에서 불변성이 어떠한 원리로 작동 하는지 알아보겠습니다. ⚡️ 자바스크립트의 메모리 구조자바스크립트의 메모리 구조는 콜 스택(Call Stack)과 메모리 힙(Memory Heap)으로 구성되어 있습니다.여기에 저장되는 값은 타입에 따라 다른 방식으로 저장됩니다.자바스크립트에는 다음과 같이 두가지의 타입이 존재합니다.원시 타입: Boolean, String, Number, nu.. 2023. 1. 5. 반응형 이전 1 2 3 4 5 다음
오픈 채팅
