es6
-
[2019.04.15] React의 개념 - LifeCycle API개발 블로깅/React 개념 2019. 4. 15. 20:32
lifeCycle 즉, 나타나기 전, 나타난 직후, 나타난 후, 사라지기 전 등등, 어떠한 것에 대해 나타나기 전부터 나타난 후 사라지기까지의 모든 과정을 말한다. 모든 컴포넌트는 이러한 lifeCycle 동안 발생할 수 있는 함수들을가지고 있다. -- [2019.04.17] 수정사항 -- 현재 리액트 버전 16.4에 들어서면서 왠만한 라이프사이클이 불필요하게 되었다. 현재 공식문서에 나오는 라이프사이클 API componentDidMount : 초기 컴포넌트가 생성될 때 componentDidUpdate : 중간에 컴포넌트가 변경사항이 있을 때 componentWillUnmount : 컴포넌트가 삭제될 때 ------- # 브라우저에 나타나기 전 호출되는 API constructor constructo..
-
[2019.04.15] React의 개념 - state개발 블로깅/React 개념 2019. 4. 15. 18:44
내가 이해한 대로 적는 설명 state는 해당 컴포넌트가 가지고 있는 상태, 즉 데이터를 말한다. 각 컴포넌트들은 자신의 데이터들을 가지고 있을 수 있다. (함수형의 컴포넌트는 state를 가지지 않는다! 오로지 class 방식만!) # state를 선언하는 법 class Hello2 extends React.Component{ constructor(props){ super(props); this.state = { //여기에 Object 방식으로 state를 저장 name : 'inyong', age : 27 } } render = () => ( Hello {this.props.todo} ) } constructor 생성자에서 state변수를 만든다. 그리고 그 안에 object 방식으로 데이터를 추가해..
-
[2019.03.27] 전개 연산자 개념개발 블로깅/Modern script 2019. 3. 27. 11:50
배열을 조금 더 직관적으로 사용할 수 있는 방식인 전개 연산자라는 개념이 있다. # 전개연산자123456const add = (a, b, c) => { return a + b + c;} var arr = [1, 2, 3];console.log(add(...arr)); // 6cs위와 같이 배열 변수를 분해하지 않고 그냥 할당해버리는 방식이다. 1234var arr1 = [3, 4, 5];var arr2 = [1, 2, ...arr1, 6, 7]; console.log(arr2); // [1,2,3,4,5,6,7]cs이렇게 값을 순차적으로 하나씩 넣는 작업을 쉽게 할 수도 있다. 그냥 괄호 [] 껍데기를 벗겨서 넣어버린다는 개념으로 생각하면 이해가 쉽다. ... 키워드가 구조분해할당 방식에서도 쓰이므로 헷..
-
[2019.03.27] 구조분해할당 개념개발 블로깅/Modern script 2019. 3. 27. 11:42
ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다. # 구조분해할당 - 배열 구조 분해12345var a, b, rest;[a, b] = [10, 20]; console.log(a); // 10console.log(b); // 20cs 12345var x = [1, 2, 3, 4, 5];var [y, z] = x; console.log(y); // 1console.log(z); // 2cs 위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.12345var a, b;[a = 5, b = 7] = [1]; ..
-
[2019.03.06] 비동기 처리방식 Promise와 Async await개발 블로깅/Modern script 2019. 3. 6. 16:54
비동기적 통신방식인 AJAX가 있는데, 그것 말고 비동기적 처리 방식인 Promise가 따로 있다. 사실 둘의 무슨 차이인지는 모르겠다.AJAX는 통신이고, Promise는 함수처리를 비동기적으로 하는 것일까..? 우선 Promise가 향후에 많이 쓰여질 방식이라고 하는 것 같아, 사용방식에 대해 공부를 해봤다. # Promise 사용법 기본적인 사용 예제12345678910111213function delayP(sec){ return new Promise((resolve, reject)=>{ setTimeOut(()=>{ resolve('run!'); }, sec * 1000); }} let finalVal = delayP(1).then((result)=>{ console.log(result); ret..