병아리의 코딩 일기

안녕하세요! 바로 돌아왔습니다! ㅋㅎ 지난 기사에서는 리액트의 라이프 사이클 및 클래스형 컴포넌트에서의 생명 주기 메소드들을 살펴봤는데요, 이번엔 useEffect로 이 메소드들을 편리하게 사용하는 방법을 소개해볼게요 ! useEffect의 등장 useEffect는 React 16.8 버전에 새롭게 추가된 Hook입니다. 처음에도 말했듯이 useEffect를 사용하면 클래스형 컴포넌트를 작성하지 않아도 함수형 컴포넌트에서 side effect를 수행할 수 있습니다. 어떤 개발자분은 'useEffect를 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다.' 라고 합니다. useEffect는 다음과 같이 두 가지 형태가 ..

여러분 안녕하세요 :) 바쁘게 코딩하다보니 시간이 정말 빨리 가네요 ,, ㅎㅋㅋ 10기는 벌써 2학기 공통 프로젝트 기간에 접어들었는데요, 다들 프로젝트 잘 진행하고 계신가요?! 저는 모바일을 하게 되어서 플러터로 개발하고 있는데,, 1학기보다 더 바쁘게 지내고 있습니다 ㅠㅠㅋㅋ 이번엔 1, 2편으로 나누어 React의 Life Cycle과 useEffect에 대한 내용을 준비해봤습니다 :) useEffect가 뭘까요? useEffect는 함수형 컴포넌트에서도 부작용(Side Effect)을 처리할 수 있게 해주는 Hook입니다. * 여기서 부작용이란, 컴포넌트가 렌더링 되거나 상태가 업데이트 될 때 발생하는 작업을 말합니다. 함수형 컴포넌트 이전에는 클래스형 컴포넌트를 사용했었는데요, 오늘은 클래스형 ..

Promise 메커니즘 분석 new Promise(function () {}) 형태 new Promise(function (resolve, reject) { resolve("성공"); }); new Promise(function (resolve, reject) {…}prototype.constructor를 호출하며 인스턴스를 만든다. new 연산자로 Promise를 호출하면 일반적으로 new Point(one, two)처럼 인스턴스의 초기값을 파라미터에 작성하지만 비동기 처리를 위한 환경을 만들기 위해 파라미터에 함수를 사용했다. 실행자 함수는 constructor의 확장이며 constructor에서 연속해서 실행한다. 실행자의 파라미터에 함수 이름 작성 new Promise((resolve, rejec..

all() 파라미터의 모든 Promise 처리를 완료 했을 때 then()의 핸들러 함수를 실행한다. Promise.all() 형태로 작성한다. 파라미터를 이터러블로 작성한다. 작성한 순서로 Promise 인스턴스 생성 all()의 파라미터를 이터러블로 작성했다.Promise 인스턴스를 생성하여 반환한다. 파라미터에 작성한 순서로 order() 함수를 호출하여 setTimeout(()⇒ {…}, dealy)지연 시간으로 값의 단위는 밀리초다. setTimeout()의 두 번째 파라미터 delay는 따라서 setTimeout()의 지연 시간이 짧은 순서인실행할 때마다 아래의 then()을 호출하지 않고 3갤르 모두 실행한 후에 then()을 한 번만 호출한다. 100, 300, 500 순서로 resolve..

resolve() 성공(fulfilled) 상태의 Promise 인스턴스를 생성하여 반환한다. Promise.resolve() 형태로 작성한다. 파라미터 값에 따라 생성 바업이 다르다. 파라미터에 값을 작성하면 파라미터 값으로 Promise 인스턴스를 생성하여 반환 const obj = Promise.resolve(["sports", "music"]); obj.then((value) => { console.log(value); }); console.log("끝"); const obj = Promise.resolve(["sports", "music"]);Array, Object 등을 사용해야 한다. resolve() 파라미터에 값을 작성했다. 값을 하나만 작성할 수 있으므로 다수를 작성하려면 new 연산자..

then() 성공과 실패 핸들러 함수를 작성한다. Promise 인스턴스를 반환한다. (값을 반환하는 것이 아님) 파라미터 첫번째 : 성공일 때 실행될 핸들러 함수 두 번째 : 실패일 때 실행될 핸들러 함수 실행자의 resolve(), reject()에 파라미터 값을 다수 작성하더라도 핸들러 함수는 처음 하나만 사용한다. const obj = new Promise((resolve, reject) => { resolve(1, 2, 3); }); obj.then( (value) => { console.log(value); }, (reason) => { console.log(reason); } ); resolve(1, 2, 3); 파라미터에 값을 3개 작성했다. 실패(reject)가 발생하지 않으면 rejec..