React

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. 초기코드 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-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount() { this.getMovies(); ..

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. # Mounting Component가 mounting될 때 constructor() 실행 static getDerivedStateFromProps() 실행 componentDidMount() 실행 class App extends React.Component { constructor(props) { super(props); console.log("hello"); } state = { count: 0, }; componentDidMount() { console.log("component rendered"); } render() { conso..

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. 함수들을 function component라고 칭한다. React.Component를 상속한 App 클래스 생성. React Component는 자동적으로 render메소드를 실행한다. 동시에 state라는 오브젝트를 가지고 있다. 여기에는 계속 변하는 데이터가 들어가게 된다. state는 무엇인가? 컴포넌트 내부에서 자체적으로 읽고, 업데이트할 수 있는 값을 사용하기 위해 state가 존재한다. 모든 리액트 컴포넌트 안에 존재할 수 있는 오브젝트이다(필수는 아니므로 없어도 된다) 컴포넌트 내 state가 변경될때마다 해당 컴포넌트는 다시..

이 글은, 노마드코더의 "ReactJS로 영화 웹 서비스 만들기"를 공부한 내용을 수강자 입장에서 필기한 것으로, 다소 불친절한 설명이 있을 수 있음을 미리 알립니다. 우리가 보낸 component 인자가 제대로 전달되었는지 확인하는 방법 List에 rating항목을 추가한다. const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg", rating: 5, }, { id: 2, name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAA..