[코비] SONSU 웹서비스 제작기2

✅ NPM (node package manager) : 자바스크립트 라이브러리들을 설치하고 버전을 관리한다.

✅ yarn : facebook에서 npm의 단점을 보완한 라이브러리 관리 도구
-> yarn 사용 불가 오류 해결 링크

📌 페이지 이동 구현
react-router-dom를 활용하여 페이지 이동을 구현할 수 있다.

🏷️ react-router-dom 설치

npm install react-router-dom

🏷️ React Router 사용

{/*App.js*/} 

import {BrowserRouter,Route,Routes} from 'react-router-dom';
import Study from './component/Study';
import Study_play from './component/Study_play';


function App() {
  return (
    <div className="App">      
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<Study />}/>
          <Route exact path="study_play" element={<Study_play/>} />
        </Routes>
      </BrowserRouter>   
    </div>
  );
}

export default App;

BrowserRouter : 전체 컴포넌트들을 감싼다.

Route : 컴포넌트 별로 원하는 url 주소를 할당한다.

Routes : 원하는 컴포넌트만을 라우팅할 수 있다.

{/*Study.js*/} 

<Link to="study_play">
   <div className="level_component">자음</div>
</Link>

Link는 특정 주소로 넘어갈 수 있도록 해준다.

위 코드에서 자음을 누르면 url이 /study_play로 바뀌게된다.

<Link to={"/test"}
  state={{grade : 'cho'}}>
  <Button 
    color="secondary"
    variant="contained">
    초급
  </Button>
</Link>

버튼에 따라 같은 페이지에서 우측 상단의 초,중,고급 텍스트만 변화되기를 원했다. 따라서 Button을 감쌌던 Link에서 state값을 넘겨주기로 했다.

Link는 다음과 같은 속성들을 지정하여 넘겨줄 수 있다.
to(pathname): 넘어가고 싶은 url 경로
search: 쿼리 매개 변수의 문자열 표현
hash: url에 넣을 해시
state: location을 유지할 state 값

아래 코드에서는 to, state 두가지 속성을 지정하였다.

🏷️ var: 중복 선언 가능

var name = 'javascript';
console.log(name); // javascript

var name = 'react';
console.log(name); // react

✔️ var로 선언한 변수는 동일한 이름으로 여러번 중복해서 선언이 가능하다.

✔️ 변수를 한 번 더 선언했음에도 불구하고 에러가 나지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.

→ 유연한 변수 선언으로 간단한 테스트에서는 편리할 수 있으나, 코드량이 많아지면 어디서 어떻게 사용될지 파악하기 힘들고, 값이 바뀔 우려가 있다.

✅ 이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let, const 이다.

🏷️ let : 중복 선언 불가, 재할당 가능

let name = 'javascript';
console.log(name); // javascript

let name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name); // vue

✔️ var 과 다르게 let은 해당 변수가 이미 선언되었다는 에러 메세지가 출력된다. 따라서 중복 선언이 불가능 하다.

✔️ name=’vue’ 와 같이 변수선언 및 초기화 이후 다른 값을 재할당 할 수는 있다.

🏷️ const : 중복 선언 불가, 재할당 불가

const name = 'javascript';
console.log(name); // javascript

const name = 'react';
console.log(name);
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'vue';
console.log(name);
// Uncaught TypeError: Assignment to constant variable

✔️ let은 변수에 다른 값을 재할당할 수 있지만, const는 재할당 시 에러 메세지가 출력된다.

✔️ 한번만 선언이 가능하고, 바꿀 수 없다.