[230323] React : SPA 와 Router

---

🍀 오늘의 날짜 : 23년 03월 23일 
🍀 오늘의 주제 : React로 SPA 개발, React Router

---

 

🔖 React Router

 

#  주소에 따라 달라지는 화면 페이지 : 다른 주소에 따라 다른 뷰를 보여주는 과정 = " 경로에 따라 변경한다 " :: Routing

# React Routing이라는 라이브러리를 이용해서 Routing 을 구현합니다. 

 

 

 

[rotuer] : 라우터 역할 수행-----------------------------------------------------------------------------------------------------------------

  * <BrowserRouter/>

[route matchers] : 경로 매칭 역할 수행--------------------------------------------------------------------------------------------------

  * <Routes/>

  * <Route/>

[route changers] : 경로 변경 역할 수행--------------------------------------------------------------------------------------------------

  * <Link/>

 

 

 

▶ React Router 공식문서

 

 

 

 

 

# npm install을 통해 라이브러리를 설치한 후, 

# React Router 라이브러리를 사용하기 위해 " impot " 로 불러와야 합니다. 

//[1] 터미널
npm install react-router-dom@^6.3.0


//[2]
import { BrowserRouter, Routes, Route, Link} from "react-router-dom";

* import : 필요한 모듈을 불러오는 역할 / 비구조화 할당( destructuring assignment )과 비슷하게 이용 가능. 

 

 

 

 

 

추가 필요 공부 내역 
# 비구조화 할당이란? 

 

 

 

# update : 23.03.27

📍비구조 할당 (destructuring assignment )

ES6부터 등장한 JavaScript의 새로운 표현식입니다. 배열이나, JSON 객체의 프로퍼티를 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 자바스크립트 식 표현식입니다. 

 

 

이전에는 배열에 있는 요소 혹은 JSON 객체의 프로퍼티를 각각 변수에 담기 위해 일일히 변수에 할당을 했어야 하는 불편함이 있었습니다. 

 

let [user1, user2, user3] = [ 'emma', 'Lucia', 'Tiffany']

let {name, age, gender} = {
	name: 'emma', 
    age: '28',
    gender: 'w'
}



// JSON 객체의 key 값을 변수명으로 사용하는 경우, ( key 값 대신 변수명을 지정 )
let {name: user_name, age: user_age, gender:user_gender} = {
	name: ' emma', 
    age: '28', 
    gender: 'w'
}



// key 값이 변수 명으로 사용이 불가능한 문자열로 되어 있는 경우, 
let {['user name']: user_name, ['user~age']: user_age, ['user~gender']: user_gender} = {
	'user name' : 'emma',
    'user~age' : '28', 
    'user~gender': 'w'
}

# 참고 블로그 : [JavaScript] 비구조화(구조분해) 할당

# 벨로퍼트와 함께하는 모던 자바스크립트 : 06. 비구조화 할당(구조분해 ) 문법