React (5) 썸네일형 리스트형 react-router-dom v6 react-router-dom v6은 React 16.8 이상부터 호환됩니다. Route들을 구성하는 부모요소인 Switch가 Routes로 이름이 변경되었습니다. v5에서는 path가 '/' 였다면 '/'로 시작되는 모든 path가 매칭되는 규칙이 있었기 때문에 완전한 매칭을 위해서 exact 속성을 사용하였으나, v6에서는 exact 속성이 삭제되고 자동으로 매칭되며, 여러 라우팅을 매칭하고 싶은 경우에는 URL뒤에 *를 붙여줍니다. 기존 Route 컴포넌트의 component 속성과 render 속성이 사라지고, element 속성에 직접적으로 컴포넌트를 넣어주는 방식으로 변경되었습니다. useHistory가 useNavigate로 변경되었습니다. useNavigate는 함수이며 문자열을 넣으면 해.. React Suspense & Lazy 1. Suspense Suspense로 감싼 컴포넌트가 렌더링 될 때 fallback 속성으로 넘긴 컴포넌트를 먼저 보여줍니다. 추후 렌더링이 끝나면 감싸져 있는 해당 컴포넌트를 보여주게 됩니다. 데이터 로딩과 UI 렌더링이 분리되어 코드 가독성과 유지보수에도 도움이 많이 되는 것 같습니다. 2. Lazy Lazy 함수를 사용하면 동적 import를 통해 컴포넌트를 렌더링 할 수 있습니다. 동적 import()를 호출하는 함수를 인자로 가지며, 꼭 Suspense 하위에서 렌더링 되어야합니다. const TestComponent = lazy(() => import("../page/unauthed/RedirectPage")); Suspense와 Lazy를 사용해서 로딩, 코드분할을 통해 앱의 성능을 향상시.. Axios Axios란? HTTP 비동기통신을 위한 Promise기반의 자바스크립트 라이브러리 입니다. (유사한 라이브러리들로 fetch, superagent, request 등이 있습니다.) 클라이언트/서버에서 동일하게 작동하며 다양한 브라우저를 지원하고 ES6 문법을 사용합니다. 다양한 방법이 있지만 저는 create() 메서드로 인스턴스를 생성해서 사용하는 방법을 선호합니다. const instance = axios.create({ baseURL: 'https://blabla.com/api/', timeout: 30000, headers: { Accept: 'application/json', 'Content-Type': 'application/json; charset=UTF-8', }, }); 이렇게 인스턴스.. JavaScript ES6(ECMAScript 2015) ECMAScript 2015 ? JavaScript언어의 표준이며 2015년 06월에 발표되어 ES6 or ECMAScript2015 라고 합니다. 여러 라이브러리들이 최신 언어 명세들을 통해 작성됩니다. 특히 최근 학습중인 React는 JSX문법을 사용하기 때문에 JavaScript 컴파일러인 Babel(Create React App - 자동 설정)이 필요합니다. ① 모듈 모듈은 기능별 or 화면별로 분리해서 js파일로 따로 따로 만들어 저장해 놨다가 필요할 때 마다 import하여 사용할 수 있게 하는 기술입니다. 이러한 모듈은 재활용 할 수 있어서 프로젝트를 쉽고 빠르게 구축 할 수 있게 되었습니다.(대규모 프로젝트 가능) 모듈은 export와 import로 구성되어 있고, 다른 곳에서 불러와 사용.. 리액트 시작하기 SPA란 Single Page Application의 약자입니다. 곧 하나의 페이지로 이루어져있는 어플리케이션이라는 것 입니다. 웹 어플리케이션 뷰를 서버에서 담당하는 방식은 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생길 수 있습니다. 이를 라이브러리 또는 프레임워크를 사용하여 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당하는 방식으로 사용할 수 있습니다. 예를 들어, 첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는게 아니라, 새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만들어 줍니다. 이전 1 다음
