mysitespring mvc v -> jsp, template
states 세팅하는 방법 1. setState() 2. Loading State (비동기) 3. Smart Component(prop과 state가 같이있는) VS Dumb Component(Functional Component) (prop만 있는, render만 하면되는) 함수형은 외부의 변수를 가져와서 사용하면안됨 class App extends Component { state = { greeting: 'Good Morning' } componentWillMount() { console.log('componentWillMount() called'); } componentDidMount() { console.log('componentDidMount() called'); setTimeout( () =>..
// life Circle // render : componentWillMount() (마운트할까말까) -> render() -> componentDidMount (컴포넌트가 렌더됐다) // update : componentWillReceiveProps() -> componentShouldUpdate() (업데이트할까요? return (old props != new props) false면 render로 안감) -> componentWillUpdate() -> render ()
1. props (data flow) 데이터를 어떻게 외부에서 받아서 컴포넌트까지 잘 전달하느냐어떠게 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하느냐 2. 생명주기 (Life Circle) 3. states state는 변경만되면 자동으로 컴포넌트가 업데이트되는거컴포넌트의 데이터가 변해서 화면 ui가 변해야한다면 state를 줘야함 변하지않는다면 property로 둬야함 컴포넌트마다 state가 있는애 state가 없는애(property만 가지고있는애, 더미컴포넌트) Render는 한번만 불려지는게아님 데이터가 흘러들어와서 property를 변경시키냐 state를 변경시키냐 처음에는 property 리액티브 프로그래밍 : 하나가 변경되면 다 변경되게하는? 4. Ajax on React
import React, { Component } from 'react';import logo from './logo.svg';import './App.css'; class App extends Component { render() { return ( Hello World ); }} export default App; ES6에서는 class키워드 등장 class 나왔다고해서 자바스크립트가 아닌건 아님 App.js 안에 내용 다지우고 helloworld로 변경 App.css도 다지우고 테스트 F12로 Element 확인 리턴한값이 컴포넌트 render함수 오버라이딩해서 값을 리턴시키면 그 값이 컴포넌트 npm start해서 서버 켜진뒤 url뒤에 어떤값을 넣어도 무조건 index.html index.jsi..
vs code 설치 위 버튼 누른후 ESLint 검색후 설치 Guides, Reactjs code snippets, Reactive Path 3가지 검색하여 설치 npm install -g create-react-app : npm create-react-app 설치 -g : global create-react-app : 페이스북에서 만든 도구, 리액트 프로젝트 만들어줌, index.html, index.js을 만들어줌 리액트 프로젝트 폴더에 create-react-app helloworld로 helloworld 프로젝트 생성 npm start 실행시 서버 켜지면서 테스트 가능 (index.html, index.js 제공해줌) npm start가 번들 작업까지하여 서버까지 올려서 보여줌 이건 그냥 테스트일..
React 1. Component (View를 만드는 기술) -> bundle = (html, css, ajax) bundle을 만드는기술 jsx : 브라우저가 해석할수없음 컴파일하여 bundle을 만들어 브라우저에게 전달 webpack : 컴파일하는것 jsx로 개발을하고 이것을 올릴 서버(테스트)도 제공해줌 jsx가 번들을 전달할떄 실행할수있는 index.html를 전달하고 index.js도 전달 임베디드 서버도 자동 제공 위 방식은 서비스를 개발하는게아니라 단순히 테스트하는 용도 리액트는 js만 잘하면되고 view만 만들기때문에 다른곳에서도 사용가능