axios 사용과 영화 데이터 가져오기 1. 라이브러리 설치 npm install axios 데이터를 읽어올때 사용하는 라이브러리 설치 2. 영화데이터 제공 사이트 https://yts.mx/api#list_movies 3. 크롬 확장프로그램 : JSON 문서 확인 크롬 확장기능 json view 에서 API를 통해 받아올 수 있는 데이터, json 문서를 깔끔하게 확인 가능하다. 사용 가능한 데이터로 변경 https://yts-proxy.now.sh/list_movies.json 4. 프로젝트 적용 3-1. axios 적용 📑App.js import React from "react"; import axios from "axios"; class App extends React.Component { sta..

React Hooks React Hooks란 2018년 발표된 class 없이 state를 사용할 수 있는 기능입니다. 기존 리액트는 주로 클래스 컴포넌트를 사용하였는데 리액트 혹스는 함수형 컴포넌트를 사용한다. 1. Class Component Vs Functional Component Class Component Functional Component 많은 기능 제공 적은 기능 제공 긴 코드양 짧은 코드양 복잡한 코드 심플한 코드 더딘 성능 빠른성능 1-1 생명주기 Functional Component 어떤 기능을 사용하지 못하는 걸까? => React Hooks가 없었을 때 생명주기 사용 불가 현제 React Hooks로 생명주기도 사용이 가능하다. 1-2. HOC (wrapper) 컴포넌트를 줄일 ..

Promise - 비동기 패턴 객체 사용 1. 비동기 패턴 1-1. 콜백함수 callback 함수는 a라는 로직 이후에 실행 되는 로직을 말한다. 함수의 인수로 사용되는 함수를 콜백함수 실행 순서 보장 function a(callback){ // 1. 함수 setTimeout(()=>{ console.log("a"); callback() // 2. 콜백함수의 실행 위치 },1000) } function b() { console.log("b") } a (function (){ // 3. 콜백함수 = a 함수의 인수로 사용되는 function 함수 b() }); 1-2. 콜백지옥 (연이은 콜백함수의 사용) 순차적으로 콜백함수를 사용할때 > 이와 같은 모양이 나타나게 된다. 다음 순서를 보장은 하지만 관리가 ..

클래스형 컴포넌트 (Class Component ) 1. 내보내기 1-1. default 내보내기 컴포넌트들은 보통 default로 내보낸다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. class App extends Component{ render(){ return ( 예산 계산기 ) } } //내보내기 default - 메인으로 내보냄 export default App; 2-1. 클래스 바로 내보내기 여러개 내보낼 수 있다. 📑 App.js import { Component } from "react"; //리엑트에서 Component 가져온다. export class App extends Component{ render()..

JSX (Javascript syntax extension) 1. JSX (Javascript syntax extension)이란 ? JSX를 이용하여 UI를 나타낼 때 자바스크립트 (logic)와 HTML구조를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현 할 수 있습니다. 리엑트에서 JSX를 사용하지 않을 수도 있지만, 편리하기 때문에 사용을 권장합니다. 만약 JSX를 사용하지 않는다면 리엑트에서 제공하는 React.createElement API를 사용해야한다. React.createElement API 엘리먼트 객체를 생성 후 IN-Memory에저장 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려준다 . 2. JSX..