라우터 사용해보기

우선 라우터를 사용하기 위해서는 라우터를 설치해줘야 한다.

설치하고자 하는 파일로 cd 명령어를 통해 들어간 후,

npm install react-router-dom 명령어를 통해 라우터를 설치해 준다.

 

우선 다음과 같이

FirstPage.js 파일(좌)  SeCondPage.js파일(우)

 

간단한 문장이 출력되는 파일 2개를 만들어주었다.

 

그리고 출력을 위한 파일로 이동해 다음과 같이

코드를 작성해 준 뒤, 

 

실행을 위한 index.js 파일

index.js 파일로 이동해 출력시켜보았다.

 

첫 번째 페이지를 출력시키기 위한 이름을 / 로 지정해주었기에 

localhost: 포트번호/ 를 하면 다음과 같이 첫 번째 페이지가 출력된다.

 

그리고 뒤에 /Second 라는 이름을 덧붙이면

다음과 같이 

두 번째 페이지가 출력된다.

 

이번에는 앞의 두 페이지를 링크로 연결해

링크를 클릭할 경우 각각의 페이지로 넘어가도록 만들어보겠다.

LinkTest.js 파일

 

App.js 파일

 

실행시켜보면

다음과 같이 화면이 출력된다.

그리고 이때, 두번째 페이지(바로가기)를 클릭하게 되면

다음과 같이  두번째 페이지로 넘어가게 된다.

 

 

다음은 오브젝트를 생성해

특정 인물에 대한 내용들을 출력시켜보겠다.

Profile.js 파일

App.js 파일

 

App.js 파일에서 14번째 줄의 지정해둔 path와

미리 입력해둔 키워드로 링크를 타고 들어가면

localhost: 포트번호/profile/키워드

다음과 같이 미리 입력해둔 글들이 떠오르게 된다.

 

이번에는 쿼리를 사용해보도록 하겠다.

쿼리를 사용하기 위해서는 설치가 필요하다.

터미널 창에 npm install qs 명령어를 쳐

쿼리를 설치해준다.

QueryTest.js 파일

App.js 파일

 

실행시켜보면

다음과 같이 미리 입력해둔 글이 떠오르는 모습을 볼 수 있다.