03 Feb 2021
|
로그포스
2021-02-03 TIL
- 오늘 한 것
- 리액트 공부 - 튜토리얼 프로젝트에 라우팅을 적용하여 페이지를 나누고 사용자가 form에 입력한 데이터를 활용하는 방법을 배웠다. 데이터가 어떻게 페이지 사이를 넘나드는지, 또 어떻게 DB에 저장한 데이터를 다른 페이지에서 꺼내서 화면에 출력하는 지를 알았다.
- 학원 비대면 수업(15:30~22:00)
- 내일 할 것
- 리액트 공부 - React The complete Guide
- 학원 비대면 수업(15:30~22:00) 개인프로젝트 발표
- 개인 프로젝트 발표 준비
내일은 드디어 개인 프로젝트 발표날이다. 만들어 놓은지 시간이 좀 지나서 찬찬히 코드 리뷰를 다시 해봐야겠다.
오늘의 한 줄 총평 : 입춘!
02 Feb 2021
|
React
React.js Code Splitting
-
Code Splitting
- 16.6 이후 React.lazy() 메소드를 이용해 코드분할을 좀 더 편리하게 할 수 있게 되었다
- create-react-app 혹은 Webpack 과 같은 번들링 툴을 이용한다면 사용자가 따로 지정하지 않아도 번들링이 진행된다
- 앱이 커질수록 번들도 커져 로딩시간이 길어지기 때문에 번들을 나누는 것이 좋다
- React의 코드분할은 런타임시 필요한 번들을 동적으로 불러와 사용하기 때문에 Lazy Loading하게 해주며 메인 번들에서 벗어나게 해준다
React.lazy, Suspense는 아직 서버 사이드 렌더링을 할수 없다. React는 서버에서 렌더링 된 앱에서 코드 분할을 하려면 Loadable Components를 추천하고 있다.
-
import()
- 코드 분할에는 동적 import() 문법이 쓰인다
- 이 특별한 문법으로 필요할 때만 import하는 것이 가능해진다
const Posts = React.lazy(() => import('./xxx/xx경로'));
-
Suspense
- lazy 컴포넌트는 Suspense 컴포넌트의 하위에서 렌더링되어야 한다
- Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다
- fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안의 예비 컨텐츠를 보여준다
- React.lazy는 현재 default export만 지원하고 named export는 지원하지 않는다
- 코드 분할은 Route level 에서 다른 페이지로 넘어갈 때 설정하거나 Component level에서 존재하지만 보이지 않는 컴포넌트를 불러올때, 또는 스크롤이 긴 하나의 페이지를 나눌 때 등에 사용하면 좋다
<div>
<Suspense fallback={<div>Loading...</div>}>
<Posts />
</Suspense>
</div>
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
React.js 코드 분할(Code Splitting)
02 Feb 2021
|
React
React.js Routing props,Nested Routing,Redirect
-
props
- Route 컴포넌트는 3가지 props를 전달받는다
- history : push, replace로 다른 경로로 이동, 앞뒤 페이지 전환이 가능하다
- location : 현재 경로의 정보를 지님, URL 쿼리 정보도 가지고 있다
- match : 아떤 라우트에 매칭되어 있는지와 params 정보를 가지고 있다
-
props를 이용한 경로 설정
- history의 push 메소드로 특정 위치로의 jump가 가능하다
this.props.history.push({ pathname: '/' + id });
this.props.history.push('/'+id); // 축약
-
Nested Routing (중첩 라우팅)
- 중첩 라우팅은 최상위 컴포넌트에서 라우팅되는 컴포넌트를 여러 단계에 걸쳐 쪼개는 것이다
- 애플리케이션의 규모가 커짐에 따라 최상위 컴포넌트에서만 라우트를 다루기에는 한계가 있다
- 여러 post들이 있고 이 중 한 개를 클릭했을 때 그 내용이 표시되어야한다면, 연관된 하위 컴포넌트에서 라우팅을 함으로서 좀 더 유연한 구현이 가능해진다
<Route path='/potsts' component={Posts} />
/*
* 다음과 같은 Route가 있을 때,
* match, location, history가 담긴 props를
* Posts 컴포넌트에 넘겨주게 된다
*/
/*
* Posts에서는 다시 하위 컴포넌트에 props를
* 넘겨줄 수 있다
*/
<Route path={this.props.match.url + '/:id'} exact component={FullPost} />
/*
* 최하위 컴포넌트에서는 넘겨받은 params, props 등으로
* 작업을 수행할 수 있다
*/
if(this.props.match.params.id) {
//...
}
-
Redirect
- Redirect는 from / to 를 이용하여 새로운 위치로 jump하게 해준다
- from의 요청 경로를 to로 redirection 한다
<Redirect from='/' to='posts' />
// root page의 경로를 posts page로 바꾼다
- 조건부 Redirection
- 조건을 추가하여 특정 조건이 만족되면 페이지 이동을 할 수 있다
- 로그인에 성공했을 때 나오는 페이지, 새로운 포스팅을 하고 home 화면으로 돌아가는 등 유용하게 쓰일 수 있다
let redirect = null;
if (this.state.submitted) { //특정 조건이 만족되면 home으로 귀환
redirect = <Redirect to='/home' />;
}
return (
{redirect}
)
- Redirect와 같은 기능을 하는 history의 replace() 메소드가 있다
- this.props.history.replace(‘home’); 사용법은 매우 간단
- push와 replace의 차이점은 history를 가지고 있는가의 차이다. 뒤로가기를 눌렀을때 replace는 특정 행위를 하기 이전으로 돌아가지만 push는 뒤로가기 버튼을 누르기 이전으로 돌아간다
- 즉, replace는 로그인 후 뒤로가기를 누르면 로그인 하기 전 머물렀던 페이지로 돌아가지만 push는 로그인 페이지 그 자체로 돌아간다.
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
React Router - VELOPERT
React Router로 중첩 라우팅 하기
02 Feb 2021
|
React
React.js Routing
-
Routing이란
- 기존 웹 사이트의 구조는 여러 페이지로 구성되어, 클라이언트가 요청할 때마다 페이지가 새로고침되어 로딩되며 서버로부터 리소스를 전달받아 해석 후 렌더링을 했다
- 이런 불필요한 트래픽 낭비를 줄이고자 Single Page Application 통칭 SPA가 나오게 되었는데, SPA는 주소에 따라서 다른 뷰를 보여주는 라우팅을 이용한다
- 클라이언트의 브라우저에서 뷰 렌더링이 이루어지기 때문에 서버의 부하를 줄이고 당연히 속도도 상승한다
- React에는 공식적으로 라우팅을 지원하는 라이브러리가 없으며 react-router는 써드 파티 라이브러리로 쉽게 라우팅을 구현할 수 있다
- react-router-dom 패키지는 웹 개발에 쓰이는 컴포넌트를 지원하며 react-router-native는 앱 개발 컴포넌트를 지원한다. react-router는 이 둘을 합친 것이다
-
Routing
- npm install –save react-router-dom
- BrowserRouter는 HTML5의 History API를 이용하여 새로고침 없이 주소변경이 가능하도록 해준다
- Route에는 exact라는 옵션이 있다. exact는 path와 정확히 경로가 일치해야 render가 된다. Route는 동일한 path로 여러 개 설치가 가능하기 때문에 이 옵션을 이용해서 항상 보여줄 menu bar 등을 깔아둘 수 있다
- Route의 렌더링 방식은 두 가지. 일반적으로 component를 많이 쓴다. render는 hard-coding이 필요한 경우
// Root Component
import { BrowserRouter } from 'react-router-dom';
const Root = () => (
// Root Component를 BrowserRouter 적용
<BrowserRouter>
<App />
</BrowserRouter>
);
import { Route } from 'react-router-dom';
<Route path='/' exact component{Posts} />
<Route path='/about' render={() => <h1>안녕</h1>};
-
Link
- re-load는 현재 state 값을 잃어버리는등 자원 소실의 우려가 있고 처음부터 다시 rendering이 진행된다
- re-render만으로 페이지 이동이 가능해야한다
- Router의 Link 태그는 이 부분을 해결해준다, a 태그를 Link 태그로 바꾸자
<Link to='/'>Home</Link>
<Link to>about</Link>
-
withRouter
- 일반 컴포넌트에서 라우터에서 사용하는 객체(history, match, location 등)에 접근하려면 withRouter라는 HOC(고차원 컴포넌트)를 사용해야한다.
- 이를 통해 컴포넌트에서 라우터를 제어할 수 있게 된다
- 뒤로가기 구현, Link 없이 화면 렌더링을 하는 등 다양하게 이용할 수 있다
import { withRouter } from 'react-router-dom';
/*
...
*/
export default withRouter(componentName);
-
Absolute Path vs Relative Path
- Link 태그의 to=’xxx/xxx’ 는 기본적으로 절대경로이다
- 절대경로는 항상 도메인 바로 뒤에 붙는다
- 절대경로는 to=’posts’ 뒤에 추가하기 위해 to=’new’를 사용해도 com/posts/new가 아닌 com/new로 이어진다
- 기존 경로에 무언가를 추가할 때 상대경로를 사용할 수 있다
- 이때 props.match를 사용할 수 있다
- /posts가 링크된 컴포넌트에서 to={props.match.url + ‘/new’}를 사용하면 com/posts/new에 무언가를 추가할 수 있다
-
NavLink
- Link와 기능은 유사하지만 NavLink가 활성화되면 active 클래스가 생성되고 이를 통해 스타일을 지정할 수 있다
- NavLinkt의 property로 activeClassName=’xxx’을 주게 되면 클래스 이름도 사용자 정의가 가능하다
- activeStyle= 등 css를 이용하지 않고 inline으로도 style 정의가 가능하다
- exact 옵션 추가 가능
-
Switch
- react-router-dom 패키지의 Switch 컴포넌트를 사용하면 여러 Route 컴포넌트들이 중첩되어 렌더링되는 것을 막을 수 있다
- Switch는 매칭되는 첫 번째 Route만 보여주고 더 이상 분석하지 않는다
- 이를 사용하기 위해서는 Route들의 상위 컴포넌트로 Switch 컴포넌트를 감싸기만 하면 된다
참고 자료
reactjs.org - 공식홈페이지
Udemy - React The Complete Guide
React Router - VELOPERT
리액트 라우터와 서버사이드 렌더링
Archive