React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다. 이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다. 하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다. 만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다. 이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다. 매개 변수..

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) 컴포넌트를 줄일 ..

클래스형 컴포넌트 (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..