Javascript/React (5) 썸네일형 리스트형 React 바인딩(이벤트/메서드 연결) 자바스크립트에서 바인딩 (Javascript Binding) 결론부터 이야기하면 key point는 자바스크립트에서 "this"에 대한 이해가 완벽히 되어있어야 한다.리액트 바인딩을 알아보기 전 자바스크립트에서 바인딩을 알아본다.자바스크립트에서 객체안의 메서드에서 this는 그 메서드가 포함된 object를 가리키게 된다. 12345678var obj = { prop: 'Hello', sayHello: function() { console.log( this.prop ); }}; obj.sayHello(); //"Hello" 즉, 위의 예제에서 sayHello 메서드안의 this는 obj객체가 되어 obj.prop인 Hello를 전달받아 콘솔 로그를 찍는다.obj의 sayHello()를 다르게 출력해보면 .. Props, State (리액트 컴포넌트 속성, 상태) Props, State (리액트 컴포넌트 속성, 상태) Properties(속성)의 Props이다. 리액트에서 변동하지 않는 데이터를 다룰 때 사용한다.123456789101112131415161718192021222324252627282930import React, { Component } from 'react';import PropTypes from 'prop-types';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( Welcome to React 이름은 {this.props.name} 이고, 나이는 {this.props.age} 입니다. ); }} App.PropTyp.. JSX (React Component) JSX React에서는 Javascript 문법이 아닌 JSX문법을 사용해서 UI를 만든다.JSX의 특징1. 빠르다. (컴파일)2. Type-safe 다. (예측불가능한 결과를 내지 않는다. 쉽게 얘기하면 타입에 엄격)12345678910import React from 'react'; class App extends React.Component { render(){ return ( jeong-pro blog ); }}export default App; [App.js]import React from 'react'는 ES6문법으로 var React = require('react')와 같다.React 모듈은 Component를 만들 때 사용한다.class 도 ES6문법으로 이전에는 클래스를 느낌만 주고 pro.. 리액트(React) 환경 설정 (create-react-app) 리액트(React) 시작하기 - (create-react-app) 리액트를 시작하는 가장 쉬운 방법은 create-react-app을 이용하는 방법이다.환경설정할 때 babel, webpack 등을 설치해야 하지만 create-react-app으로 리액트 애플리케이션을 만들면이러한 작업들을 create-react-app이 대신 설정해주고 숨겨준다.리액트 프로젝트 만들기1. "npm install -g create-react-app"2. "create-react-app 프로젝트명(my-app)"3. "cd 프로젝트명(my-app)"4. "npm start"이렇게하면 샘플 애플리케이션이 localhost:3000 에서 실행된다.[create-react-app 샘플 화면] create-react-app을 통해.. 리액트(React) 리액트(React) React는 페이스북에서 개발한 UI 라이브러리로 재사용 가능한 UI를 생성할 수 있게 해준다.React는 라이브러리긴 하지만 Redux, react-router와 함께 프레임워크처럼 사용된다.React는 Virtual DOM이라는 개념을 사용하여 상태 변화에 따라 선택적으로 UI를 렌더링한다.DOM (Document Object Model)객체를 통해 구조화된 문서를 표현하는 방법. (XML,HTML로 작성)웹 브라우저(클라이언트)는 DOM을 통해서 javascript, css를 적용한다.DOM의 문제점DOM API의 최대 문제점은 동적 UI에 최적화되지 않음이다.대규모 애플리케이션 또는 수 많은 데이터가 로딩되고 표현해야하는 애플리케이션에서 DOM에 직접 접근하여 프론트엔드에 변화.. 이전 1 다음
