비엣맨의 공부 노트 비엣맨의 공부 노트

1. npm i axios 설치 한 후, API DATA로 부터 Fetching하는 과정을 보자. async ~ await 구문은 바로 응답하기 전까지 기다리게 하는 문법이다. axios.get("api주소")를 통해 data를 받아 온 후, DidMount함수에서 실행시켜주자. import React from "react"; import axios from "axios"; class App extends React.Component { state = { isLoading: true, movies: [] }; getMovies = async () => { const movies = await axios.get("https://yts.mx/api/v2/list_movies.json") } component..

1. state 를 사용하기 위해서는 먼저, App 컴포넌트를 function 기반에서 class 기반으로 바꾸주어야 한다. state를 사용 하는 이유는 컴포넌트의 data를 동적으로 바꿔주기 위함이다. 먼저, Add 버튼과 Minus 버튼 클릭 시 console.log에 add 와 minus가 찍히게 하는 구조이다. 눈으로 따라가다보면 이해할 수 있다. import React from "react"; import PropTypes from "prop-types"; class App extends React.Component { state = { count: 0 }; add = () => { console.log("add") }; minus = () => { console.log("minus") }; ..

1. JSX 란, 리액트에만 있는 개념으로, 리액트 컴포넌트를 html 화 하는 개념을 뜻한다. 컴포넌트에 있는 html 형식으로 된 등과같은 것들은 사실 html이 아니라, html 화 시키기 전에 리액트 자체적으로 만든 코드들이라고 보면 된다. 이 일련의 과정을 JSX라고 보면 된다. 2. 컴포넌트 만들기 src/Potato.js 파일 생성 후, 아래와 같이 입력 한다. import React from 'react'; function Potato() { return ( I Love Potato ) } export default Potato; 그 후, 아래와 같이 App.js 에서 Potato 컴포넌트를 import 하여 사용한다. import React from 'react'; import Potat..

1. cmd 창에 npx create-react-app movie_app_2020 입력 2. package.json 파일에 아래, test 와 eject 제거 (두개는, 해당 강좌에서 다루지 않기 때문에 삭제) "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 3. npm start 를 명령어로 실행시키면 리액트 웹페이지가 하나 새로 뜸. 4. github에 올려주자 5. src/index.js 에서 아래 내용만 남겨두고 다 삭제(해당 강좌에서 다룰 부분만 남겨두는 것) import React from '..