본문 바로가기

React/ReactJS로 영화 웹 서비스 만들기8

8. 영화 앱에 여러 기능 추가하기 화면 이동을 시켜주는 장치인 라우터를 설치해보자. Home은 영화 앱 화면으로 이동시켜주고, About은 개발자 자기 소개 화면으로 이동시켜준다. components 폴더에 Movie 컴포넌트 옮기고 routes 폴더에 라우터가 보여줄 화면을 만든다. 먼저 Home 부터 꾸며보자. .container { height: 100%; display: flex; justify-content: center; } .loader { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; font-weight: 300; } .movies { display: grid; grid-template-columns: repe.. 2020. 8. 11.
7. 리액트 영화 앱 다듬기 영화 장르 props 를 추가해보자. genres props가 배열이므로 map() 함수를 사용할거다. genres props를 ul, li 엘리먼트로 감싸 출력할 것. 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%; } .movies .movie { background-color: white; margin-b.. 2020. 8. 8.
6. 리액트 영화 앱 만들기 axios를 import한 다음, componentDidMount() 함수에서 axios로 API를 호출하면 된다. axios는 네트워크를 사용해서 느리게 동작하므로 getMovies 함수를 만들고, 그 함수안에서 axios.get()이 실행되로록 만든다. 그리고 async, await를 사용해서 자바스크립트에게 getMovies()함수는 시간이 좀 필요하다는것을 알린다. this.setState에 key:value 와 isLoading의 상태를 업데이트 해준다. 하지만 아직 화면에는 아래와 같은 메시지만 뜰거다. 그 이유는 movies state를 Movie컴포넌트를 통해 화면에 그려야 한다. import React from 'react'; import axios from 'axios'; class A.. 2020. 8. 8.
5. state와 클래스형 컴포넌트 state는 동적 데이터를 다룰 때 사용한다. props는 그런 데이터를 다루지 못하기 때문에. 우리는 state를 사용하기 위해서 클래스형 컴포넌트를 사용할 것이다. import React from 'react'; class App extends React.Component { render() { return I'm a class component } } export default App; class컴포넌트는 클래스라서 return문을 사용할 수가 없어서, JSX를 반환하려면 render()함수를 사용해서 그 안에 return을 작성한다. 함수형 컴포넌트 : return 문이 JSX를 반환 클래스형 컴포넌트 : render() 함수가 JSX를 반환한다. 리액트는 state를 직접 변경하지 못한다. st.. 2020. 8. 1.

티스토리툴바