CodingCredit

React-router-dom 이 v6로 업그레이드되면서 사용법들이 많이 바뀌었다. 매번 찾기도 그래서 기존에 많이 사용하던 것들이 어떻게 바뀌었는지 정리해보도록 하겠다. 바뀐 모든 기능을 정리하기보다는 기존에 자주 사용하던 기능들만 어떻게 바뀌었는지 정리해보겠다! App에서 중첩 라우팅 설정 Switch, exact가 삭제되었다! 라우터가 중첩될 때 썼던 Switch, exact가 삭제되고 이제는 중복되는 경로의 태그에 /*를 입력하고 자식태그로 넣어준 뒤에 부모태그의 컴포넌트에 Outlet을 넣어준다. // 기존 App function App() { return ( ); } // V6 App import { BrowserRouter, Route, Routes } from "react-router-do..

🧐 절대경로 import ? 보통 디렉토리구조가 복잡하지 않다면 import 시 상대경로로 설정해도 큰 불편함이 없다. 그러나 디렉토리 구조가 복잡할수록 상대경로가 길어지고 보기 안좋아지게 되는데, 나의 경우 테스트코드를 작성하면서 절대경로로 import할 필요성을 느끼게되었다. 디렉토리구조는 아래와 같다. ├── _test/ ㄴ_reducer/ ㄴ todo.test.ts ㄴ components/ ㄴ hooks/ ... ├── src/ ㄴ _reducer/ ㄴ todo.ts ㄴ components/ ㄴ hooks/ ...src폴더와 같은 deps에 _test폴더가 존재하기때문에 _test폴더의 파일에서 src폴더의 파일들을 import하기 위해서는 조금은 어지러운 상대경로를 설정해야했다. 따라서 이를 간..

프로젝트를 시작하기 전에, 작은페이지라도 처음부터 만들어봐야겠다는 생각이 들어서 CRA로 시작하는 초기세팅을 해보려한다. CRA 설치 npx create-react-app 이후 public폴더안의 index.html과 src폴더 안의 index.js 를 제외하고 다 삭제해준다. 라이브러리 설치 (예시: React Router) React Router 설치 npm install --save react-router-domsrc 폴더 안에 Router.js파일 생성 Router.js 파일 세팅 요청 경로와 렌더링할 컴포넌트 설정한다. 하위 라우터 중 하나를 선택한다. 요청 경로를 다른 경로로 리다이렉션 한다. (아래의 경우로 예를 들면, 설정하지 않는 경로 요청 시 "/" Home 경로로 이동한다는 말이다. ..

React를 공부하다보면 매우매우 자주 듣게되는 용어들이 있다. 컴포넌트, 단방향데이터, CSR, Virtual DOM . . . 하나하나의 개념을 이해하려고 노력하며 공부하고있다. 오늘은 Virtual DOM에 대해서 공부해봤다.😆 Why Virtual DOM? 누군가 왜 Virtual DOM을 쓰는지 물어본다면 뭐라고 답할까? DOM 조작이 비효율적이고 느리기 때문에?? 자사크립트 엔진은 계속해서 성능이 좋아지는데, 정확히 어떤 부분때문에 DOM이 느려지는 걸까? 정확히는, DOM조작이 전체 동작을 비효율적으로 만드는게 아니라, 그 이후에 일어나는 일 때문에, 작업이 느려지는 것이다. 이를 이해하기 위해서는 브라우저의 워크플로우에 대해 알 필요가 있다.🏃🏻‍♂️ 브라우저의 Workflow DOM Tr..

TypeScript처럼 타입을 확인할 수 있는 기능이 React 내장되어 있는데, 바로 prop-types이다. import PropTypes from 'prop-types' 클래스 컴포넌트, 함수 컴포넌트 상관없이 사용할 수 있다. Test라는 함수의 props 들의 type을 확인해 보자. 아래는 name prop이 string인지 확인하는 예시이다. Test.propTypes = { // 소문자 p prop: PropTypes.string, // 대문자 P } 배열 또는 객체가 한가지 타입으로 구성되어있는지 확인 => arrayOf, objectOf prop1: PropTypes.arrayOf(PropTypes.number) 객체의 각 property value들의 타입을 하나하나 확..

React Hook을 배우기 전에, 왜 React Hook을 써야하는지 확실히 짚고 넘어가려고 한다 😆 첫번째, Reuse React Class component 사이에서는 상태와 관련된 로직을 재사용하기 어렵다. props로 넘겨주다보면 코드를 추적하기 어렵고, 레이어로 둘러싸인 래퍼지옥을 볼 가능성이 높다. React Hook? 컴포넌트로부터 상태관련로직을 추상화 할 수 있다. Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있게 해준다. 두번째, 복잡한 컴포넌트에서의 어려운 상태관리 리액트에서 각 생명주기 메서드는 다양한 로직과 섞여있고, 각 상태관련 로직들은 모든 공간에 있기 떄문에, 이러한 컴포넌트들을 모두 작게 쪼개서 관리하는 것은 불가능하다. React Hook? 이것을 해결하기 위해..