Archived(Programming)/ReactJS (9) 썸네일형 리스트형 ReactJS_9_Deploy 다른 프로젝트에서는 배포에서 애를 많이 먹었다. 그러나 ReactJS에서는 비교적 간단한 편이다. 먼저 Build를 통해 배포의 준비를 한다(압축해줌). $ npm run build /package.json 내용 추가 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "homepage": "http://YoonShinWoong.github.io/movie_app", "scripts":{ "start": "react-scripts start", "build": "react-scripts build", "te.. ReactJS_8_MovieApp_보충 1. Data 받아오기 json 요청으로 가져온 데이터 중에서, 필요한 데이터 컬럼을 log를 통해 찍어서 확인한 뒤 그에 맞게 가져온다. 가져올 때는 최대한 Component 단위로 쪼개서 가져오는 것이 세련된 코드이다. /src/App.js import React, { Component } from 'react'; import './App.css'; import Movie from './Movie.js'; class App extends Component { state = { } componentDidMount(){ this._getMovies() } _getMovies = async() => { const movies = await this._callApi() this.setState({ movie.. ReactJS_7_Async_Await 1. 개념 Async Await는 우리가 작성한 코드들을 좀 더 분명하게 해준다. then을 계속해서 쓰면 헷갈리고 어려워진다 -> async await를 통해 처리하자. async: 비동기 방식으로 작업이 진행된다. await: 결과 값을 기다려서 받은 후에 작업이 진행된다. 바로 예제 코드를 보도록 하자. 2. 영화앱 참고사항 state = { } componentDidMount(){ this._getMovies() } // DidMount를 크게 만들지 않기 위해 나누기! _getMovies = async() => { // const movies의 값은 await 로 함수의 결과값을 기다린다 const movies = await this._callApi() this.setState({ movies .. ReactJS_6_Fetch_Promise 1. 개념 Fetch는 쉽게 말하면 무엇인가 가져오는 것을 뜻한다. 우리는 ReactJs에서 XML 파일을 링크를 통해 가져오고자 하는데 이 때, Fetch를 통해 가져올 것이다. 구체적으로는 AJAX를 통해 비동기화 방식으로 새로고침 없이 가져온다. REACT에서는 AJAX와의 작업이 간편한데다가 사용도 쉽기에 AJAX와의 연동을 추천함. cf_비동기화 프로그래밍 비동기화란 쉽게 이야기하면, 순차적으로 실행되는 것이 아닌 별개로 실행되는 형태이다. 반드시 좋고 나쁜 것이 아니라 특징적인 것이다. Promises는 말 그대로 약속으로, 우리가 처리할 것들을 시나리오를 잡아준다. fetch와 promise를 통해 시나리오를 만들고 관리하면 보다 효율적인 처리가 가능하다. 이 때, fetch를 통해 링크로 .. ReactJS_5_Smart_Dumb 1. 개념 Smart component는 state Dumb component는 stateless 어떤 컴포넌트는 return을 위해 존재한다(mount function update state와 같은 것들이 필요없음) props, html 만이 필요로 한다. 이러한 Component를 보고 Dumb Component라고 한다. (상태가 없다 -> 멍청하다, 직관적으로 받아들이기 쉽다) 즉, state도 없고 render도 없고 lifecycle도 없다. stateless로 바꾸는 방법은 function MoviePoster{{poster}}{} 와 같이 함수형 Component로 작성하면 된다. 밑의 예시에서 자세히 살펴보자. 2. 영화앱 /src/Movie.js import React from 'rea.. ReactJS_4_State 0. 컴포넌트 LifeCycle React 컴포넌트는 다음과 같은 사이클을 통해 순차적으로 실행된다. componentWillMount->render->componentDidMount이 순서대로 발생 예를 들어 componentWillMount: 영화관련 api요청 componentDidMount: 데이터 처리하는데 사용 로 표현할 수 있다. 1. 개념 State는 말 그대로 상태를 말하는 것으로 React에서는 컴포넌트의 상태를 이야기한다. React 컴포넌트는 자신의 상태를 저장할 수 있다. props와의 달리 state는 컴포넌트 내부에서 존재하므로 얼마든지 수정이 가능하다. state는 변경될 때마다 render가 발생한다. state를 직접 변경할 수 없기에 우리는 setState 같은 함수를 .. ReactJS_3_Props 1. 개념 props는 쉽게 말해 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 값을 말한다. Props는 속성(properties)의 줄임말이다. React의 props는 사용자가 컴포넌트 내에서 보존하길 원하는 데이터를 뜻한다. 따라서 컴포넌트 내부에서 props의 값은 보존되어야한다. 만약 props의 값을 수정하고자 한다면 컴포넌트 내부가 아닌, 부모 컴포넌트에서 수정하여야 한다. 2. 영화앱 우리는 모든 정보를 가지고 있는 부모 컴포넌트 App 에서 영화 제목들을 Movie Component에 넘기고자 한다. 이 때 props의 개념이 들어가게 된다. /src/App.js import React from 'react'; import './App.css'; import Movie from './Movi.. ReactJS_2_컴포넌트 1. 개념 Component는 React를 구성하는 기본 요소이며, Render를 통해 보여준다. npm이 start되면 이러한 js에 있던 컴포넌트가 컴파일 되어 html 파일이 되어 출력된다. 만들어지는 html 파일이 public 폴더 내에 생성되는 것이다. 여기서 ReactDOM은 웹으로 출력하도록 도와주는 것이고 ReactNative는 모바일로 출력하도록 도와준다. 2. 영화앱 우리는 영화 소개 페이지를 만드는 것을 목표로 한다. 그를 위해 3 가지 Component가 필요하다. movie_list component movie component image_component 이 때 JSX라는 언어를 사용할건데 이는 React Component 를 만들때 사용하는 언어이다. 특별한 규칙도 따로 없고.. 이전 1 2 다음