뚜벅

리액트 리렌더링 1. props, state 변경 시 리렌더링 2. 부모컴포넌트 리렌더링시 자식 컴포넌트 리렌더링 리액트에서는 위의 조건일때 리렌더링이 발생하는데 이것을 최적화하는 방법을 정리합니다. React.memo React.memo 는 고차 컴포넌트 (HOC) 로 함수 & 클래스 컴포넌트에서 사용가능합니다. React.memo을 통해 최적화를 할 경우 렌더링에 될 때 props를 체크하여 이전 props에서 변화가 있다면 렌더링을 하고 변화가 없다면 기존에 렌더링된 결과를 재사용합니다. React.memo는 오직 props의 변화에만 의존하는 최적화 방법! 그렇기 때문에 useState, useReducer, useContext를 통해 state가 변경되면 리렌더링이 발생합니다. funtion A..

리액트 가상돔 - React Virtual DOM DOM DOM이란 Document Object Model의 약자이며, 웹페이지에 들어가는 element 요소들을 tree 형태의 자료구조로 표현한 것입니다. 그리고 각 element에는 DOM API가 있어서 DOM을 조작할 수 있습니다. 하지만 이때 리플로우 리페인트가 발생하여 시간이 걸리게 되는데요 이것을 리액트에서는 가상돔을 사용하여 효율적으로 관리합니다. Virtual DOM 가상돔은 실제 DOM의 복사본으로 자바스크립트의 객체 형태로 메모리에 저장됩니다. 이것들은 DOM의 복사본으로써 모든 element , 속성들을 가지고 있지만 브라우저에 직접 접근하여 DOM을 조작하는 것은 불가능합니다. (DOM API를 제공하지 않기 때문에) 리액트는 2개..

이번에 frontend mento 사이트에서 간단한 타이머를 만들어 봤습니다. 사용한 기술 스택 typescript react tailwind css headlessui react-countdown-circle-timer 구현 사항 1. 반응형 (모바일, 태블릿, pc) 2. 타이머 3. 환경 설정 모달 4. 시간, 폰트, 색깔 설정 1. 반응형 구현 tailwind css를 사용하면 반응형 디자인을 쉽게 구현할 수 있기 때문에 tailwind css를 사용했습니다. 필요한 색깔, 폰트, 사이즈 등을 tailwind.config에 세팅해 줍니다. 2. 타이머 구현 타이머 구현은 react-countdown-circle-timer 라이브러리를 사용해서 구현하였습니다. 3. 환경 설정 모달 및 홈 화면 탭바..

사이드 바가 열려있을 때, 외부 클릭을 하면 사이드 바를 닫아주는것을 구현하기 위해 아래와 같이 외부 클릭 시 이벤트를 주었습니다. 전체 코드

이번 팀 프로젝트에서 redux을 사용할 일이 있어 공부도 할 겸 정리해봅니다! 우선 redux를 사용하기 위해 알아야 할 4가지 개념을 간단하게 정리해보면 1. redux 복잡한 상태를 관리하는데 도움이 되는 상태 관리 도구이며 예측이 가능하다. 중앙 데이터 저장소 (CDN)를 통해 전체 데이터 저장소를 한 곳에서 관리할 수 있다. 2. reducers 상태를 관리하고 새롭게 업데이트된 상태를 반환해준다. 3. actions actions는 type, payload 두 가지 속성을 가지며 type는 고유 식별자 payload는 디스패치에 대한 데이터가 포함되어 있다. 4. dispatch 데이터 업데이트 actions를 보내는 데 사용된다. Redux 사용 1. react에서 redux를 사용하기 위해..

최근 프로젝트를 마무리하고 Netlify로 배포를 했습니다. 그 과정 중에 있던 에러 해결 과정을 글로 남깁니다.!! Netlify를 선택한 이유는 배포하는 과정이 쉽고, 무료인 점 그리고 깃허브에 연동후 배포 한경우 push 가 있을 때 자동으로 재 빌드를 해주는 점 때문에 Netlify를 선택하여 배포하였습니다. 하지만 배포 과정 중 에러가 많이 나왔고 특히 "build.command" failed 부분에서 시간을 많이 낭비했습니다. 다른 블로그와 Netlify 커뮤니티를 검색해서 찾아본 결과 1. package.json의 scripts에 build에서 "CI = react-scripts build" 실패!, 터미널에서 실행 안됨 2. package.json에서 배포한 주소를 homepage에 입력 ..