이 글은 김민준(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? "불변성"은 값이나 상태를 변경할 수 없는 것을 의미하고, "불변성을 지킨다"는 결국 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 일컫는다. 대체 이게 무슨 소리냐? 원시 타입과 객체/배열 타입의 경우를 나누어 생..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. DRF Token 연동하다가 안 되는 게 너무 화가 나서 React 속성 공부를 시작했더니 눈이 찢어질 것 같다. 목차 1. What is Hooks? 2. useState 3. useEffect 4. useReducer 5. useMemo 6. useCallback 7. React.memo 8. useRef 9. Costom Hooks 1. What is Hooks? Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 이전에 Component를 다룰 때, 언급된 내용이긴 하지만 좀 더 자세히 이야기 해보자. Hooks 기능이 개발된 ..

이 글은 김민준(velopert)님의 리액트를 다루는 기술을 참조하였습니다. 목차 1. JS map() function, Component array 2. key 3. Create & Delete 1. JS map() function, Component array map 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 기본적으로 알고 있어야 굉장히 편하다. arr.map(callback, [thisArg]); callback 함수의 param은 현재 처리하고 있는 요소, 요소의 index 번호, 원본 배열이며 thisArg는 callback 함수 내부에서 사용할 this 레퍼런스인데 선택사항이다. const arr = [1,3,5,7]; const m..