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는 프레임워크처럼 여러 기능이 내장되어 있지 않으며, 이는 라이브러리로 불리는 이유 중 하나이다. 기능들을 사용하려면 각각의 기능을 설치해야 한다.
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
는 페이지 전환 시 추가 처리해야할 로직이 있는 경우 사용한다.