- 왜 리엑트인지?
웹3세대 특징 (spa)-single page application.
규모가 커지고 복잡한 애플리케이션을 개발하며 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 frontend Framework(library)가 등장하게 된다.
그렇다면 왜 리액트를 사용하는가?
1)컴포넌트 사용
리액트로 만들어진 어플리케이션은 기본적으로 엘리먼트라는 화면에 보여질 것을 표현하는 요소로 구성된다.
화면의 한 부분을 컴포넌트라는 단위로 나눌 수 있고 독립할 수 있다. 컴포넌트는 따로 관리하기 용이하게 해주고 반복되는 부분을 대체하게 해주니까 코드 재사용성을 높여준다.
2)가상돔을 통한 빠른 렌더링가능
가상돔이란 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 REACTDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 리액트는 가상 DOM을 이용해서 실제 DOM을 조작하는 횟수를 줄여서 성능을 빠르게 개선했다.
데이터변경=>리액트는 가상DOM을 다시 변경=>이전의 가상 DOM과 비교해서 변경된 부분을 체크해서 변경부분만 실제 DOM에 적용한다.
이런 리액트의 렌더링 방식은 DOM전체를 매번 리랜더링하는 방식에 비해 빠르고 애플리케이션 규모가 클수록 데이터 변경이 많을수록 더 큰 힘을 발휘한다.
3)SPA,CSR
SPA와 CSR은 리액트만의 장점은 아니지만 리액트 라이브러리의 주요장점!
SSR(server side rendering)의 경우 변화가 있을 떄마다 새롭게 전체 페이지를 다시 로드해야했다. 그러나 CSR(Client side rendering)은 SSR과 달리 서버로부터 데이터를 받아서 클라이언트에서 렌더링하는 방식이다. 서버로부터 데이터를 받아서 바뀐 부분의 데이터가 있는 화면만 새롭게 렌더링을 한다.
CSR은 검색엔진 SEO최적화를 할 수 없는 문제가 있는데 리액트에서는 CSR과 SSR을 함께 사용할 수 있다. 이것이 가장 큰 장점.
2.리엑트란?
사용자 인터페이스ui를 만들기 위한 자바스크립트 라이브러리
리액트는 가상돔을 통해 UI를 빠르게 업데이트(바뀌는 부분만 효율적으로)
가상돔: 이전 UI 상태를 메모리에 유지해서 변경될 UI의 최소집합을 계산하는 기술
CRA(create-React-App)
리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 도구
-리액트는 UI기능만 제공. 따라서 개발자가 직접구축해야하는 것이 많다.
-CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
CRA를 사용하려면 Node.js와 npm이 필요함
1)Node.js란 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
2)npm은 패키지 도구(npm이란 node.js 패키지 관리자)
node.modules
- CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
package.json
CRA기본 패키지 외 추가로 설치된 패키지 이름과 버전 정보가 들어있음
gitignore
노드모듈스는 헤비하기에 깃에 올리지 않고 package.json파일로만 개발환경들을 공유함
노드 모듈스를 깃에 올리지 않기 위해 gitignore파일이 필요하다.
- 1명의 개발자가 package.json만 깃헙에 올리고 나머지 2명의 개발자가 git clone클론(클론하고 npm install입력)처음에만 git 클론하고 나중에는 git pull origin master
npm start하면
index.html(id가 root인 div가 있음)
index.js(내가 보여주고 싶은 컴포넌트와 컴포넌트의 위치(id가 root인 div에)를 지정해줌)여기서 ReactDom.render라는 함수를 실행해준다.
ReactDOM.render( <Routes />, document.getElementById('root')
); --컴포넌트와 컴포넌트가위치하고 싶은 위치- CRA로 만든 앱에 라우팅 기능을 적용하려면
index.js를 수정해야 한다.
컴포넌트 대신에 routing을 설정한 컴포넌트(Routes />로 변경해야 한다.
App.js 현재 화면에 보여지고 있는 초기 컴포넌트
이 세 파일을 삼각형만들어서 작업.
React Router
리액트 프로젝트에서 html 파일의 개수는 1개=>SPA(single page application)
한 개의 웹페이지 안에서 여러 개의 페이지를 보여주는 방법: Routing
라우팅이란 다른 경로(주소)에 따라 다른 뷰(화면)을 보여주는 것이다.
리액트 자체에는 이러한 기능이 내장되어있지 않음, 리액트가 framework(큰틀)가 아닌 Library(틀 안에 있는 하나하나의 기능)로 분류되는 이유
라우팅 기술을 구현해주는 library이름이 React-router 정확히 말하자면 리액터 라우터 돔
Routes.js만들기_이것 자체가 컴포넌트임. index.js에서 import해서 사용할 수 있음
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/main" component={Main} />
</Switch>
</Router>위 switch component는 어떤 경로냐에 따라서 다른 컴포넌트를 보여줌
Router컴포넌트는 url 경로를 직접 설정해주고 이에 따라 내가 보고 싶은 컴포넌트를 생성해주는 컴포넌트.!
Route이동하기
1.<Link>컴포넌트 사용하는 방법
Routes.js에서 설정한 path로 이동하는 첫 번째 방법은<Link>컴포넌트를 사용하는 방법React-router-dom에서 제공하는<Link>컴포넌트는 DOM에서<a>로 변환(compile)된다.<a>-외부사이트로 이동하는 경우
<Link>-프로젝트 내에서 페이지 전환하는 경우- 클릭 시 바로 이동하는 로직 구현 시에 사용한다.
2.withRouterHOC로 구현하는 방법
- onClick이벤트를 통해 페이지를 이동하는 방법도 있다.
- goToMain이라는 event handler에서 구현한 것처럼 props객체의 history(this.props.history)에 접근해서 이동할 수 있다.
- 페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 사용한다.
Sass
가장 큰 기능 :Nesting기능
보기편하고 굳이 클래스네임 불필요하게 안줘도 된다.
- 변수 활용, &연산자, mixin등 기본기능 적용하기
$theme-color:blue;
src폴더 안에 styles폴더 안 common.scss안에 적용해서 사용해주고
이를 import해서 사용