좀 더 인터랙티브하게 만들어 볼게. 네비게이션은 react-router dom이라 불리는 것을 쓸거야 이것은 네비게이션을 만들어주는 패키지다. https://www.npmjs.com/package/react-router-dom react-router-dom DOM bindings for React Router www.npmjs.com react에서 설치할것이다. npm i react-router-dom 설치가 되는 동안 이것들을 정리해볼거야!

좋아 여러분~ 우리가 이 아름다운 react 소개를 마쳤어~~~~~ 너는 여전히 많이 배워야만해! 더 중요한 건 연습해야해! 말하지 않은 것들이 있는데 너는 더이상 state를 갖기 위해 class component를 가질 필요가 없어 내가 말하지 않은 이유는 이것은 react의 새로운 부분이고 이것을 이해하는데 많은 시간이 걸릴 것이기 때문이다. 다시 말하면, 너는 더 이상 state를 갖기 위해 class component를 가질 필요가 없어. react hook이라는 것 때문에 그렇다. 이것은 같은 거야 그리고 만약 react.js 문서를 본다면, 거기서 여전히 class component를 가르치고 있는 것을 볼 수 있을거야 사람들이 너는 react hook도 못쓰니? 하면 react hook은 ..

이 코드들을 cloud로 올려보자! 우선 gh-pages를 설치해야 한다. npm i gh-pages gh-pages는 너의 웹사이트를 github의 github page 도메인에 나타나게 해줄 것이다. github는 너에게 무료 웹 사이트를 제공할 것이다. static 웹사이트, HTML, css, JavaScript 웹사이트는 너에게 무료로 제공 된다. 너의 github 안에서 말야. 그리고 gh-pages는 정말 정말 쉬워 일반적으로 동작하는 방식은 github에서 너의 project 이름을 가져오는 식이다. 예를 들어 git remote -v 내 github에 있는 프로젝트의 이름을 보ㅕㅁㄴ movie_app_2020이야 맞지? 그런 다음 너의 user name을 가져와, 나의 경우는 https:..

summary를 JS로 조금 작게 만들 것이다. Movie.js - Movie 안에 {summary}를 가지고 있다. 우리는 array를 자르는 방법을 찾아야 한다. console 창을 열어서 const summary = "asdklf;jasldfja;lsjf;laskdf"를 치고 summary.length라고 치면 길이를 반환해준다. summary.slice(0, 140)를 쳐주면 잘라진 것을 볼 수 있다.

App.js import React from 'react'; import axios from 'axios'; import Movie from './Movie'; import "./App.css"; class App extends React.Component { state = { isLoading: true, movies: [] } getMovies = async () => { const { data: { data: { movies } } } = await axios.get("https://yts.mx/api/v2/list_movies.json?sort_by=rating"); this.setState({movies, isLoading: false}); } componentDidMount() { this.g..

장르를 추가하기 Movie.js의 Movie.propTypes에 genres: PropTypes.arrayOf(PropTypes.string).isRequired component class 안에 JS class가 있으면 혼란스럽다. 그래서 우리는 항상 기억해야하는데 뭐냐면 class대신 className 이라고 해주어야 한다. 예를 들면 ( ))} ) } ); } } export default App; Movie.js import React from 'react'; import PropTypes from 'prop-types'; import "./Movie.css"; function Movie({id, year, title, summary, poster, genres}) { return {title} ..