프로그래밍 공부 노트

리액트에서 페이지 이동 즉, 라우터를 사용하기 위해서는 react-router-dom 모듈 패키지를 설치를 해야한다. 리액트 라우터 설치 $ npm install react-router-dom react-router 도 설치해야 하지만, react-router-dom 패키지 내부에 react-router가 함께 설치되기 때문에  react-router-dom만 설치하면 된다. 여기서 한가지 알아야 할 점은 리액트에서 라우터는 실제로 페이지가 바뀌는것이 아닌 가상으로 바뀌는것으로 웹브라우저가 해당 페이지가 변경되었는지 인식하지 못 할 수 있다. 페이지 이동을 위해서 사용되는 라우팅 방법에는 몇가지가 있다.  그 중에서 많이 사용되는  BrowserRouter, HashRouter, Route, Link 에 대해서 공부해 봤다. 라우팅을 사용하기 위해서는  import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; 해당 코드를 import 해야한다. import 한것들에 대해서 간단히 말하면 BrowserRouter와 HashRouter는 라우터 기능을 사용하게 해주는 큰 틀과 같은 역할을 하며 Route는 경로를 지정하고 해당 경로에 대한 출력 화면 즉, 컴포넌트를 설정할 수 있다. 마지막으로 Link는 a 태그와 같이 설정한 경로에대한 컴포넌트를 불러오도록 도와준다. import React from 'react' import { BrowserRouter , HashRouter , Route , Link } from 'react-router-dom' ; import LoginPage from './components/LoginPage' ; import MainPage from './components/MainPage' ; import RegisterPage from './

switch문은 조건문 대신 사용할 수 있다. 위 사진이 switch문의 기본 형태이다. case는 조건문의 else if와 유사하며 해당 조건과 switch문으로 들어오는 값이 일치할 경우 해당 부분의 코드를 출력한다. 마지막에 작성한 default의 경우 else와 같은 방식으로 동작한다. case에 작성된 조건들과 일치하지 않을 경우 default에 작성된 값이 마지막에 무조건 출력된다. *주의할점 case별로 break가 작성되어있는데 작성하지 않을경우 조건이 만족하는 부분의 작성코드부터 그 이후에 작성된 모든 코드들이 출력된다. 그러므로 break를 꼭 작성할것!  break문을 작성하지 않은 경우 출력값: