📝 성장을 위한 기록
-
자바스크립트 비동기 처리 PromiseStudy/JavaScript 2020. 2. 9. 12:49
What is Promise? The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise 객체는 자바스크립트의 비동기 처리에 사용되는 객체이며, 비동기 처리할 작업의 성공 또는 실패를 분리해서 코드를 실행하고 그에 대한 결과 값을 반환한다. Promise의 상태 프로미스는 Promise 객체가 생성되고 종료될 때까지 3가지 상태를 가지고 있다. 대기(pending) : 비동기 처리 로직이 아직 이행하거나 거부되지 않은 초기 상태 이행(fulfilled) : 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태 거부(rejected..
-
자바스크립트 비동기 처리 다루기 (Asynchronous call)Study/JavaScript 2020. 2. 8. 09:00
왜 비동기 처리가 필요한가? 자바스크립트 코드가 작성된 순서대로 실행되어야 하는 경우가 있고 그렇지 않은 경우가 있다. 예를 들어, 서버에 데이터를 요청한 후에 데이터가 포함된 화면을 출력하는 코드가 있다고 하자. 그런데 어떠한 문제가 발생하여 데이터를 불러오는데 오랜 시간이 걸리게 되면 데이터를 불러오는 코드에서 작업이 멈추게 되고 그 다음에 작성된 코드는 실행조차 되지 않는다. 이와 같이 모든 코드가 작성된 순서대로, 즉 동기적으로 처리된다면? 아마 웹 애플리케이션을 실행하는데는 수십 분이 소요될 것이다. 이럴 때 필요한 것이 코드가 작성된 순서대로 실행되지 않고, 특정 작업의 처리가 끝날 때 까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다. 비동기 처리 Asynchronous..
-
React shouldComponentUpdate vs PureComponentStudy/React 2020. 1. 18. 10:49
shouldComponentUpdate - 컴포넌트가 업데이트 되는 시점에 호출되는 메서드 - 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드 기본형태 shouldComponentUpdate(nextProps, nextState) { if(조건) { return true; } return false; }; - 리렌더링 할 조건을 작성한다 - true를 리턴하면 리렌더링하고, false를 리턴하면 리렌더링하지 않는다. 예시 import React, {Component} from 'react'; class Counter extends Component { state = { number: 0 }; shouldComponentUpdate(nextProps, nextState) { if(this.state.num..
-
React state 동적인 상태값Study/React 2020. 1. 14. 11:52
state 동적으로 바뀌는 값을 관리할 때 state 라는 것을 사용한다. props와 달리 state는 읽기 뿐만 아니라 값을 바꾸며 업데이트할 수 있다. state가 업데이트 될 때 마다 리렌더링된다. 참고로 렌더링해서 return 하는 코드에는 최대한 함수 로직을 넣지 않는다. 리렌더링 될 때 마다 함수를 새로 만드는 것은 낭비이기 때문이다. 클래스형 컴포넌트의 state - constructor 내부에서 this.state로 초기값을 설정해준다. - state는 반드시 객체 형태이어야 한다. - render 메서드에서 state를 조회하려면 this.state를 조회하면 된다. - this.setState 함수로 state 를 업데이트 할 수 있다. - state내부에 또 다른 객체 값이 있다면,..
-
React 클래스형 컴포넌트 & 이벤트핸들링과 thisStudy/React 2020. 1. 13. 11:50
리액트에서 컴포넌트를 선언하는 방식은 두 가지가 있다. Functional component 첫 번째로 함수형 컴포넌트가 있다. - 함수형 컴포넌트는 return을 통해 렌더링하고 싶은 JSX를 반환해준다. - 인자에 props를 넣어서 받아온다. - defaultProps 는 함수 바깥에 선언해준다. Hello.js import React from 'react'; function Hello({ color, name }) { return ( 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; Class component 두 번째로 클래스형 컴포넌트가 있다. - render() 메소드를 사용해야한다. 이를 통해 렌더링..