TIL. 28 React - Basic, Router
🎈 React
JavaScript와 기본적인 구성은 비슷하지만, 다른 언어라고 봐도 무방한 것 같으며 HTML, CSS, JS가 모두 포함되어 있다.
-
React(리액트)는 UI를 효과적으로 보여주기 위한 JavaScript의 라이브러리이다.
-
페이스북의 지속적인 관리로 생태계가 활성화 되어 있으며, 그로인한 여러가지 자료를 원활하게 구할 수 있고, React Native 사용으로 인해 사용자가 꾸준히 증가하고 있다.
-
Virtual DOM
불필요한 렌더링을 제외해서 성능을 활성화 시키는 React의 특징적인 기술이다. 브라우저는 기본적으로 전체를 스캔하지만, Virtual DOM은 변경된 부분만 스캔해 효율성이 높다. -
node.js
JavaScript가 브라우저 밖에서도 동작하게 하는 환경이다. -
CRA
Create-React-App의 약자로, 웹 애플리케이션을 개발할 때 간단한 명령어로 React 개발 환경을 구축 가능하다. -
Component
코드 재활용을 위해 따로 구분해 코드를 작성하는 것을 말한다. 유지보수가 용이하며 해당 페이지의 구성을 파악하는데 도움을 준다.(class형과 function형이 있다.)
🎈 React Router
React는 프레임워크처럼 여러 기능이 내장되어 있지 않으며, 이는 라이브러리로 불리는 이유 중 하나이다. 기능들을 사용하려면 각각의 기능을 설치해야 한다.
-
SPA
Single Page Application의 약자로, 이름에서 알 수 있듯이 페이지가 1개인 Application을 말한다. -
React 프로젝트에서는 .html 파일이 1개 뿐이다.(index.html) 이 때문에 한 페이지 내에서 다른 화면을 보여주어야 하는데, 다른 경로(url 주소)를 할당해 다른 화면을 보여주는 것을
Routing
이라고 한다. -
Router 사용을 위해서는
BrowserRouter
,Router
,Switch
,Route
를 import해야 한다.
import { BrowserRouter, Router, Switch, Route } from 'react-router-dom';
- 기본적으로
Switch
와Route
Component를 사용해 화면을 보여준다.
<Switch> <Route exact path="/" component={Login} /> <Route exact path="/signup" component={Signup}/> <Route exact path="/main" component={Main} /> </Switch>
// path는 해당 위치의 url을 지정해주는 속성이다.
// exact는 정확한 url을 지정해야 기능이 작동하도록 하는 속성이다.
// Switch는 값을 새로고침 해주며 exact가 없으면 모든 내용이 동시에 뜬다.
Link Component
HTML의<a>
태그와 유사하며, 지정한 경로로 이동시켜준다.
import { Link } from 'react-router-dom'; <div> <Link to="/signup">회원가입</Link> </div>
// 회원가입 텍스트에 /signup이라는 링크를 걸어 이동시킨다.
//<a>
태그와의 차이는<a>
외부 경로로 이동할 때 사용하고,<Link>
는 프로젝트 내부의 이동 시 사용한다.
withRouterHOC
링크와는 다른 방식으로 경로를 이동시켜주는 Component이다.
goToMain = () => { this.props.history.push('/main'); } render() { return ( <div> <button className="loginBtn" onClick={this.goToMain} 로그인 </button> </div>
// gotoMain 함수를 선언하고, onClick을 활용해 이벤트를 발생시킨다.
Link Component
는 클릭 시 바로 이동하는 로직 구현에 사용하고,withRouterHOC Component
는 페이지 전환 시 추가 처리해야할 로직이 있는 경우 사용한다.
Author And Source
이 문제에 관하여(TIL. 28 React - Basic, Router), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rious275/TIL28저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)