개발자의 개발 블로그

새로고침을 하고싶지 않다면,

절대, <a> 링크를 써서는 안 된다.

<a>링크를 써서 태그된 부분을 클릭하게 되면,

이동할때 페이지를 새로고침하면서 로딩하게 된다.

새로고침할떄, 깜빡거리는 현상(Blink)이 보기 싫다면,

리액트 라우터에 존재하는 Link 컴포넌트를 써야한다.

Link를 사용하면 페이지를 새로고침해서 불러오지 않고,

주소창을 변경하며 원하는 라우트로 화면을 전환하게 된다.

Link와 유사한 비슷하지만 추가적인 기능을 갖은 컴포넌트도 존재한다.

이름은 NavLink

이 컴포넌트는 현재 주소와 해당 컴포넌트의 목적지 주소가 일치한다면,

특정 스타일을 지정할 수 있다.

CSS 스타일 지정 : activeStyle으로 지정.

CSS 클래스 지정 : activeClassName으로 지정.

하지만, Link나 NavLink의 경우 링크를 걸고 단순히 클릭했을 때, 

이동시키는 기능이라 자바스크립트에서 페이지를 이동하기에는 한계가 있다.

이 경우에는 라우트로 사용되는 컴포넌트가 받는 props 중 history 객체를,

그 history 객체 중 push 함수를 활용하면 된다.

history.push('/about/intro');

yarn run v1.10.1

error Couldn't find a package.json file in "C:\\Users\\Jang\\Desktop\\routertest"

이건 뭐지 

만들자마자 실행했는데 왜 에러지?

한참을 찾았는데

황당한 이유였다.

리액트 라우터 관련 예제를 실습해보기 위해

routertest라는 폴더를 하나 만들고 그 곳에다가,

create-react-app react-router-tutorial

이라고 입력했다.

그랬더니

routertest 폴더 안에 react-router-tutorial 폴더를 만들고 그 안에 리액트가 설치되었다.

즉, routertest 폴더에서 아무리

npm start

또는

yarn start를 한다고 실행이 될까?

리액트는 하위 폴더인 react-router-tutorial에 설치되었는데.

따라서,

$ cd react-router-tutorial

를 통해 react-router-tutorial 폴더로 이동한 뒤에

실행을 시켜야 작동을 하게 된다.

황당한 실수.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

참고로, 

생성한 routertest 폴더에 리액트를 설치하려면 어떻게 할까?

create-react-app 뛰에 점(.)만 붙여주면 된다. 

붙이지 말고 한 칸 띄어서..

create-react-app .

으로 하면, 해당 디렉토리에 리액트가 설치된다.

이상으로 어이없는 문제 하나 해결!

위는 routertest에서 실행했을 때, 에러 발생. 

왜냐? 설치는 하위 폴더인 react-router-tutorial에 설치되었기 때문이다.

여기에 이렇게!!!!

SPA = Single Page Application의 약자이다.

말 그대로, 페이지가 하나인 어플리케이션이다.

예전에는 어떤 웹 어플리케이션을 만들때, 여러 페이지로 구성되었다.

A.html , B.html, C.html , D.html ....

그리고 페이지를 로딩할때마다 서버에서 리소스를 전달받아와서 렌더링했다.

즉, 웹 어플리케이션 뷰를 서버에서 담당했었다.

하지만, 규모가 커지고 사용자와의 상호 작용이 많아짐에 따라, 

데이터 정보 전송 과부화로 인한 속도 저하 등 문제점이 생기게 되었다.

그래서 요즘 나오는 라이브러리 또는 프레임워크는 뷰 렌더링을 서버가 아닌 웹 브라우저가 담당한다.

예전에는 페이지를 요청할때마다 서버로 접속하여 받아왔기 때문에, 페이지가 매번 새로고침 되었지만,

SPA의 경우 서버에서 제공하는 페이지가 한 개이며, 

로딩을 한 번 하고난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다.

일단, 첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는게 아니라,

새 페이지에서 필요한 데이터만 받아와서 다른 종류의 뷰를 만든다.

주소에 따라 다른 뷰를 보여주는 것을 라우팅(Routing)이라 부른다. 

리액트에서는 이 라우팅 기능이 기본으로 내장되어 있지 않기 때문에, 

라우팅 관련 라이브러리인 react-router를 설치해서 구현할 수 있다.

이 라이브러리는 클라이언트 사이드에서 진행하는 라우팅 과정을 쉽게 해준다.

리액트 라우터를 사용하면 페이지 주소를 변경했을 때, 주소에 따라 다른 컴포넌트를 렌더링 해준다.

또한, 주소 정보(파라미터, URL 쿼리 등)를 컴포넌트의 props에 전달하여 컴포넌트 단에서

주소 상태에 따라 다른 작업을 하도록 설정한다.

[SPA 단점]

앱 규모가 커질수록 자바스크립트 파일 크기도 너무 커지게 된다는 것이 단점이다.

페이지를 로딩할 때, 실제로 방문하지 않을 수도 있는 페이지와 관련된 컴포넌트 코드도 불러오기 때문.

(이후 추가할 예정...)

벨로포트님 블로그 참고했습니다. 추천 100번 합니다!

https://www.10000duck.com/ducks/38