공부하는 비오

원래 쓰던 방법. 템플릿 리터럴이랑 map을 사용하면 훨씬더 간편하게 코드작성이 가능하다.

JavaScript 2020. 10. 15. 14:07

promise의 메서드를 사용하면 더 쉽게 원하는 결과를 얻을 수 있다. all 여러가지 promise를 동시에 실행시킴. (전부다 실행된 후 완료) Promise.all([promise1, promise2, ... ]); **promise배열 안에 하나의 promise라도 reject되면, promise.all 전체가 reject됨. 이전포스팅에서 했던 🍎 + 🍌 를 출력하기 위해 Promise 메서드인 all을 사용하면 더 간단하게 코드를 짤 수 있다. race 여러 promise 중 제일 먼저 완료(혹은 거절)되는 promise를 받아옴. Promise.race([...promises...]); getApple은 3초, getBanana는 1초일 경우, getBanana가 먼저 호출되므로 결과는 🍌..

JavaScript 2020. 10. 14. 12:14

async async는 일종의 synctactic Sugar이다. (synctactic sugar란 문법적 기능은 그대로이나 읽기 편리한 코드.) Promise를 적지않아도, 함수 앞에 async를 붙이면 Promise를 사용한 것과 같은 결과를 준다. 왼쪽의 Promise를 사용한 코드와 오른쪽의 async를 사용한 코드의 결과가 동일하다. async를 사용할 경우, 좀더 적은양의 코드를 사용할 수 있다. await await은 async가 있을때에만 사용 가능하다. await 은 뒤쪽의 코드가 실행된 후, 그 다음코드가 실행되게 한다. 즉 비동기적인 코드들이 순서대로 실행될 수 있도록 도와준다. await은 비동기적 코드를 순서대로 읽기 편하게 만들어줌으로써 가독성을 높여준다. await을 사용하지 ..

JavaScript 2020. 10. 13. 23:25

Promise 비동기 처리에 사용되는 객체. 비동기를 처리할 때 사용. Promise는 pending(new Promise()메서드 호출), fulfilled(resolve 호출), rejected(reject 호출)의 3가지 상태를 가진다. **주의** Promise를 만들엇을 때, executor(resolve나 reject)는 바로 실행된다. new Promise (resolve, reject){ ... } resolve와 reject를 인자로 가짐. promise의 사용 promise .then( resolve의 콜백함수(value == resolve의 반환값) ) .catch( reject의 콜백함수(error == reject의 반환값) ) .final( fn{resolve와 reject에 상..

JavaScript 2020. 10. 13. 20:45

forEach Array.forEach( callback(element, [index]) ) 배열의 각 요소에 콜백함수를 적용. 콜백함수의 인자는 배열의 요소값, 인덱스값 등을 나타냄. map Array.map( callback(element) ) 배열의 각 요소에 콜백함수 적용하여 일괄 변경. 콜백함수의 리턴을 모아 새로운 배열을 만드는 것이 목적. 보통 const arr2 = arr1.map( callback()) 의 형태로 많이 사용 filter Array.filter( callback(element) ) 배열의 각 요소 중 콜백함수에 해당하는 요소를 찾아서 배열로 반환. 만족하는 요소가 없다면 빈배열을 반환. 콜백함수의 리턴값은 boolean(true or false)값을 가짐. find Arra..

JavaScript 2020. 10. 12. 17:01

State? State는 React.Component에 내장되어있는 프로퍼티이다. 그러므로 class component에서 사용. state는 일종의 object로서, 변화하는 데이터 값을 담을 수 있다. Class Component extends React.Component{ state = { key1 : value, ... }; func = ( ) => { this.setState( ... ); } render( ) { ....{this.state.key1}... } } state = { ... } 로 state 값을 지정해준다. state의 사용은 {this.state.key1}를 사용한다. 앞서 state는 변하는 데이터 값이라고 했다. state의 값을 변화시키기 위해서는 this.setStat..

React 2020. 10. 7. 16:49

배열을 사용하여 props를 만들고 적용 function Component({props1, props2}) { return ... } const array = [ {key1: ..., key2:...}, {key1: ..., key2:...}, {key1: ..., key2:...} ] function App() { return {array.,map(aja => )} 잘 적용되지만 console을 확인했을 때 error가 있음. 리스트의 자식들은 각각의 다른 key prop를 가져야한다. 이를 해결하기 위해서는 key prop를 각각 주면된다.

React 2020. 10. 6. 16:24

Props component의 argument(인자값). 함수의 argument를 바꾸어 사용하듯이, component도 props를 수정하여 사용할 수 있음. function Component( {props_value} ) { return ( ... {props_value} ); } function Food ({fav}){...} >>> Food라는 이름의 component를 만듬 (component의 이름은 항상 첫글자가 대문자) props로 fav를 가짐.

React 2020. 10. 6. 11:47