728x90 Front-end/React13 #13, React Router Dom ( BrowserRouter , HashRouter, Switch, Route ) React-Router-Dom 이란 ? 🧐 리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환한다. 리액트는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문이다. React-Router-Dom 사용하기 😉 BrowserRouter 1. Link 컴포넌트를 to 속성에 이동할 경로를 작성한다. 2. Route 컴포넌트 path속성을 Link의 to 속성과 매핑 component에 컴포넌트 경로 기술 3. 새로고침을 하면 경로를 찾지 못하여 에러가 발생한다. ( 주소를 사용.. 2021. 1. 24. #12, npm & npx What is NPM ?👋🏻 NPM은 node package manager 의 줄임말이다. NPM은 저장소 역할을 한다. 어플리케이션을 실행하고 배포 할 때, npm run start , npm run build 를 사용하게 된다. npm에 관한 정의는 package.json에 정의되어있다. npx의 장점 🧏🏻♀️ 기존에 create-react-app을 진행 할 때 npm install -g create-react-app 로 다운을 받았었다. ( global 디렉토리에 다운 받음 ) 이제는 npx를 이용하여 그냥 create-react-app을 이용 할 수 있다. npx가 npm registry 에서 create-react-app을 찾아서 다운로드 없이 실행을 시켜주기 때문이다. 따라서 npx의 장점은.. 2021. 1. 22. #11, Create-React-App Create-react-App 이란 ? 👋🏻 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모든 개발환경을 설정하지 않고, 페이스북이 지속적으로 업데이트를 해주기 때문에 많은 사람들이 사용하고 있다. 준비사항 🌿 1. Node.js Webpack, Babel 같은 도구들이 자바스크립트 런타임인 Node.js를 기반으로 만들어져 있기에 해당 도구들을 사용하기 위해서 Node.js를 설치한다. 2. Yarn npm ( 노드 패키지 매니저 ) 보다 조금 향상된 도구라고 생각하면 된다. npm은 위의 Node.js를 설치하게 될 때 같이 받게 되는 패키지 매니저 도구다. 프로젝트에서 사용되는 라이브러리를 설치 및 라이브러리 버전 관리를 하게 될 때 사용된다. 여기서 npm이 아.. 2021. 1. 20. #10. React (리액트) 란? Whatr is React.js ? 👋🏻 1. Library. Made by Facebook. Released in 2013 1. Components module과 비슷하게 컴포넌트로 이루어져 있어서 재사용이 가능하다. 2. Virtual Dom Real DOM vs Virtual DOM - Real DOM? 1. 만약 10개의 리스트가 있다. 2. 그 중에 한가지의 리스트만 Upload 됨. 3. 전체 리스트를 다시 Reload 해야 됨 4. Super Expensive한 작업 ! - Virtual DOM? ✔️ 1. 만약 10개의 리스트가 있다 2. 그 중에 한가지의 리스트만 Update 됨 3. 바뀐 한 가지 아이템만 DOM에서 바꿔준다. 어떻게 Virtual DOM에서 바꿔주지? 👀 1. JSX를.. 2021. 1. 20. 이전 1 2 3 4 다음 반응형
