VirtualDom React 18 버전부터 virtualDom은 업데이트의 우선순위를 부여해준다. (ex. 애니메이션과 text 중 우선순위를 선정) Fiber는 리엑트 렌더링/업데이트의 가장 작은 단위이다.(react컴포넌트보다 작은 단위) Reconciliation(재조정)시, DFS(깊이우선탐색)로 노드를 하나씩 다 비교한다. 따라서 불필요한 태그를 제외하는게 좋다.(빈 태그도 비교한다.) 공식 URL

원티드 프리온보딩 프론트엔드 챌린지4월 사전과제 중, React 18 버전의 업데이트관련사항 정리가 있어 해당 내용을 다시 정리해본다. Automatic Batching React 17버전까지는 이벤트 핸들러 내부에서 발생하는 상태변경만 하나로 통합하여 처리 후 리렌더링을 진행했다. 이 경우, 이벤트 핸들러에 콜백을 받아 처리하는 메소드가 존재하는경우에는 내부 콜백이 완료된 후에는 배치처리가 통합되지 않는 단점이 있었다. React 18에서는 이러한 비효율성을 해결하고자 상태 업데이트를 하나로 통합하여 리렌더링을 진행한다. Transition 개발을 하면서 특정부분은 즉각적인 렌더링을 해주고, 어떤 부분은 렌더링을 후순위로 미뤄도 되는 경우가 있다. 가장 많이 드는 예시로는 검색어 입력이다. 검색창에 검색어를 입력할때, 입력하는 Input은 즉각적인 렌더링을 해줘야하며, 입력한 검색어의 연관 검색어는 즉각적인 렌더링보다는 시간차를 두고 렌더링 혹은

BrowserRouter createBrowserRouter 아래의 errorElement를 각 routing마다 지정해준다면 해당 페이지의 에러가 다른페이지에 영향을 주지 않는다. 위의 파일을 작성 후 , index.tsx파일을 아래와 같이 변경한다. 마지막으로 App.tsx를 수정한다. useNavigate useParams Next.js의 router.query.id와 같은 기능

이전 회사에서 거래명세서와 같이 특정 형식을 엑셀로 다운받는 기능을 구현하는 경우가 있었다. 구글링을 통해 exceljs 라이브러리를 사용하는것이 그나마 간단히 구현 가능하다고 판단되어 아래와 같이 구현했다. 라이브러리 공식 페이지를 참고하여 위와 같이 구성해주면된다. 그러나 해당 방식으론 원하는 UI를 구현하기 위해선 엄청난 시간과 노력이 들어가므로 다른 방식을 찾는것이 좋을거 같다

이전 회사에서 작업 시 , 특정 화면 혹은 특정 모달내의 화면을 PDF로 다운받는 기능을 구현한 경우가 있다. 난 해당 기능은 jsPDF라이브러리와 html2canvas라이브러리로 간단히 구현했다. rootElementId는 PDF로 다운 받을 엘리먼트의 id이며, downloadFileName는 다운받는 파일 이름이다.

클라이언트에서 사진을 업로드할 시, 서버에 바로 저장하지 않고 미리보기로 업로드한 사진을 보여줄 경우가 있다. 이를 구현한 코드는 아래와 같다. 1. fileReader 위의 함수를 input의 onChange이벤트에 아래와 같이 적용시켜준다. 2. createObjectURL

react 사용 시 , 무한스크롤을 구현할 때 아래와 같은 방법으로 구현이 가능하다.

React란? React는 SPA(Single Page Application)를 위해 사용되는 오픈소스 JS라이브러리이다. SPA는 전체 페이지를 하나의 페이지로 구현한 것으로 동적으로 화면을 바꾸면서 표현하는 것이다. 모든 정적 리소스를 클라이언트 브라우저에서 한번에 다운받고 이후 새로운 페이지 요청시 서버단에서 갱신에 필요한 데이터를 받아 갱신한다. React는 단방향 데이터 흐름을 따르며 UI구성요소를 재사용할 수 있다는 특징이 있다. Virtual DOM이란? Virtual DOM은 DOM을 메모리 내에서 구현한 것이다. 데이터가 업데이트되면 Virtual DOM에 리렌더링을하고 기존의 DOM모델에서 변경되는 사항을 비교하고 업데이트할 요소의 목록을 만든다. 따라서 DOM전체를 다시 렌더링하지 않고 최소한의 부분만 변경하여 효율성을 높일 수 있다. DOM HTML을 파싱하여 구성요소들(NODE)들을 객체로