이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 많은 데이터 렌더링하기 2. Memorized Component 3. React.memo 4. useState Functional Update & useReducer 5. react-virtualized 1. 많은 데이터 렌더링하기 책에서 따라한 todo-app 기반으로 테스트를 해볼 것이다. 전체 코드는 괜히 올렸다가 저작권 관련으로 신고받고 싶지 않으니 따로 게시하지 않겠디. function createBulkTodos() { // 데이터 때려넣기 const array = []; for (let i = 1; i { const todo = { id: nextId.current, text, checked: false,..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. 비동기 작업 2. Callback Function 3. Promise Object 4. async/await keyword 5. axios로 API 호출 6. 참고 자료 1. 비동기 작업 synchronous(동기)란 요청과 응답을 받는 시기가 일치한다는 것을 말한다. 하지만 인터넷을 하면서 언제나 서버에 요청한 시간과 응답을 받는 시간이 일치했는가? 아니다. 요청을 처리하는 속도는 아무도 모른다. (종종 서버에 얼마나 연결되었는지 퍼센트로 로딩화면을 표시하는 곳이 있는데, 그냥 심리적인 효과 때문에 넣은 장치고 아무 의미가 없다. 계산할 수 없는 내용이기 때문.) 그럼 그동안 어플리케이션이 잠시 멈추게 되는데, 사용..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. What is Routing? 2. What is SPA(Single Page Application)? 3. React Router v6 4. URL Parameter & Querystring 5. 중첩된 라우트 6. Router Add-ons 1. What is Routing? 구글에 라우터라고 검색해보면 웬 하드웨어 장치가 나오는데 사진을 보면 대충 뭔지 알 것이다. 물론 소프트 웨어에서 말하는 라우터가 이 장치를 의미하진 않지만 "최적의 경로를 지정하며, 이 경로를 따라 ~을 전달한다."라는 개념에서는 같다. 라우팅이란 사용자가 요청한 URL에 알맞는 페이지를 보여주는 것을 의미한다. "엥, 이거 완전 HTML의..

이 부분을 건너뛰고 공부하려고 했는데, setEffect가 side-effect를 유발하기 위한 Hooks이라는 말을 듣고 의문이 들었다. 리액트는 side-effect를 방지하는 것이 원칙이라면서 이런 기능을 제공한다고? 그래서 불변성에 대한 개념부터 차근차근 이해해보려 한다. 목차 1. What is Immutability(불변성)? 2. What is Side-Effect(부수효과)? 3. useEffect 4. 참고 자료 1. What is Immutability? "불변성"은 값이나 상태를 변경할 수 없는 것을 의미하고, "불변성을 지킨다"는 결국 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 일컫는다. 대체 이게 무슨 소리냐? 원시 타입과 객체/배열 타입의 경우를 나누어 생..