반응형 SMALL 전체 글118 [JS] Promise 이해 - JS 비동기 처리에 사용되는 객체 (JS비동기 처리: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 js의 특성) - 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 - 콜백 지옥을 해결하기 위해 사용(async도 사용 가능) - 여러개의 프로미스를 연결하여 사용 가능 new Promise()로 프로미스 객체를 생성하고 종료될 때까지 3가지 상태를 갖는다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 function getData(callback) { // new Promise() 추가.. 2020. 10. 5. [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. [React] State 사용법 - props와 달리 자기 자신이 가지고 있다. (cf. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값 / 읽기전용) - 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. - 변경할 때는 항상 setState 함수를 사용한다. import React,{Component} from 'react'; class Counter extends Component{ // state는 꼭 객체여야한다. state = { number : 0 } handleIncrease=()=>{ // 업데이트 할 때는 항상 setState 함수 사용! this.setState({ number: this.state.number+1 }) } handleDecrease=()=>{ this.setState({ number:.. 2020. 10. 4. 이전 1 ··· 18 19 20 21 22 23 24 ··· 30 다음 반응형 LIST
