본문 바로가기

React26

[Hooks] 1. 사용법 배우기 노마드코더 www.youtube.com/playlist?list=PL7jH19IHhOLOagok7uFWKlOleLF64grb6 리액트 훅은 리액트의 신박한 기능인데, state, component에 대한 것들을 많이 바꿔놓는다. 결론적으로 말하자면 functional component에서 state를 가질 수 있게 해준다. 앱을 리액트 훅으로 만든다면 class component, did mount, render 이런 것들을 안해도 된다. 모든것은 하나의 function이 되는것이다. (함수형 프로그래밍) 아주 많은 사람들이 그들의 Hooks를 공유한다. hooks의 구조와 쉽게 hooks를 만들 수 있는 사실 자체가 사람들이 자신의 hooks를 공유하도록 권장하고 격려한다고 생각한다. 간단한 카운트를 .. 2020. 8. 14.
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.

티스토리툴바