우리는 링크를 통해 정보를 라우터로 보내고있다. 그래서 콘솔창을 본다면 자 그럼 props가 아니라 location으로 바꿔서 한번 전달해보자. 근데 undefined가 나오게 된다. 클릭 없이 아래의 링크로 접속하게 된다면 undefined가 나오게되는 상황이 벌어진것이다. http://localhost:3000/#/movie-detail 이를 해결해보자. 그래서 클래스 컴포넌트로 작성하면 import React from "react"; class Detail extends React.Component { componentDidMount() { const { location } = this.props; console.log(location.state); } render() { return hello; ..

route props에 대해 배워보자. About.js에 props를 추가한다면 이것들은 about으로 전송되지않고, react-router에 의해서 넣어진것이다. router에 있는 router들은 모두 props를 가진다. 그래서 클릭한번으로 정보들을 던질 수 있다는것! props를 about화면으로!!! 옮겨볼까? 자 그래서 영화 하나를 클릭하면 그 상세페이지로 가도록! doc을 보면, link에서의 to를 object, string등으로 바꿀 수 있다. 그럼 우리는 pathname과 state를 정의해보자. 여기서 우리는 about페이지로 object를 보내는거다! 그럼 about 페이지로 가게 된다면 우리가 이 링클르 클릭하면 리액트 라우터는 /about으로 데려가고 바로 컴포넌트 about이 ..

App.css를 추가해주고 * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: #eff3f7; height: 100%; } App.js에도 추가해준다. Navigation을 한번 만들어보자. Navigation.js import React from "react"; function Navigation() { return ( Home About ); } export default..

자 이제 Router를 만들어보자~! HashRouter와 Route 두 개를 가지고 한번만들어볼것이다. App.js import React from "react"; import { HashRouter, Route } from "react-router-dom"; import About from "./routes/About"; function App() { return ( ); } export default App; About.js import React from "react"; function About() { return About this page: I built it because I love movies.; } export default About; 이름은 다음과 같이 아무거나 해도 상관은 없다...

이번에는 naigation을 사용할건데 react-router-dom이라는것을 쓸것이다. https://www.npmjs.com/package/react-router-dom react-router-dom Declarative routing for React web applications. Latest version: 6.4.1, last published: a day ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 15192 other projects in the npm registry using react-router-dom. www.npmjs.com 그럼 이걸 설치해보자 npm..

이때까지 알아온 것 중! 더이상 state를 갖기 위해 class component를 가질 필요가 없다. React Hook때문에! 그치만 이도 알아둬야함!!!