반응형 SMALL React8 [study] 첫번째 수업 ** 브라우저 렌더링 동작 꼭 기억하기! 브라우저 렌더링 : 먼저 html을 파싱해서 domtree로 만들고, css를 파싱해서 css오브젝트 모델을 만든다. 그리고 그 두 개를 합쳐서 렌더트리로 만든다. 그리고 렌더트리를 디스플레이한다. js: 클라이언트에서 사용하고자 하는 언어. js 사용 이유: 서버쪽에서의 부화를 줄이기위해 클라이언트에게 역할을 줌. 전통적인 웹페이지 HTML, CSS, JS => 협업이 어렵다, 유지보수가 어렵다, 화면을 계속 refresh 해야되서 불편하다. 비효율적. => 특히 '페이스북'이 이 부분에서 가장 큰 어려움을 겪음 -> 'react' 만듦!! 리액트의 핵심: SPA(Single Page Application) - 계속 refresh 하지 않아도 된다.(리액트의 장.. 2020. 11. 21. [React] map 사용방법 - map() 메소드는 파라미터로 전달 된 함수를 통하여 배열 내의 각 요소를 순차적으로 돌며 그 결과로 새로운 배열을 생성한다. AreaList.js import React, { Component } from 'react'; import AreaListForm from './AreaListForm'; import AddedArea from './AddedArea'; class AreaList extends Component { state={ areaInfo:[], } handleCreate=(data)=>{ const{areaInfo}=this.state; this.setState({ areaInfo:areaInfo.concat(data) }) } render() { return ( {/* {JSON... 2020. 10. 30. [React] LifeCycle API 사용 예제 App.js import React, {Component} from 'react'; import MyComponent from './MyComponent' class App extends Component{ state = { counter:1, error:false } // 실수로 잡지 못한 버그를 잡을 때 componentDidCatch(error,info){ this.setState({ error:true, }) // API를 통해서 서버로 오류내용 날리기 가능 } componentDidMount(){ console.log("componentDidMount"); } handleClick=()=>{ this.setState({ counter: this.state.counter + 1 }) } rende.. 2020. 10. 5. [React] LifeCycle API 설명 1. Mounting(마운팅) - 컴포넌트가 브라우저 상에 나타나는 것 2. Updating(업데이팅) - 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때 3. Unmounting(언마운팅) - 컴포넌트가 브라우저 상에서 사라지는 것 constructor(props){} - 컴포넌트가 처음 만들어질 때 가장 먼저 실행되는 함수 - 주로 컴포넌트가 가질 state 초기설정이나 미리 해야되는 과정 처리 (static) getDerivedStateFromProps(nextProps, prevState){} - static 키워드와 함께 사용 - props로 받은 값을 state로 동기화 시키고 싶을 때 사용 - setState를 하는 것이 아니라 특정 props가 바뀔 때 설정하고, 설정하고 싶은 s.. 2020. 10. 4. 이전 1 2 다음 반응형 LIST
