22/11월 TIL(Q. Async/Await와 Promise의 차이 & useEffect와 useLayoutEffect 차이 & Closure란?)

Q. Async/Await와 Promise의 차이

⇒비동기 처리를 다룰 수 있는 방법이다. (+ Callback 도 있음)

 

차이점

1) 에러 핸들링

Promise를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만,

async/await 는 에러 핸들링 할 수 있는 기능이 없어 try-catch()문을 활용해야 한다.

 

2) 코드 가독성

Promse의 꼬리를 무는 .then() 지옥의 가능성

async/await는 비동기 코드가 동기 코드인 것처럼 흐름을 이해하기 쉽다. 코드가 길어질 수록 promise보다 가독성이 좋다.

 

 

정의

Promise

⇒자바스크립트 비동기 처리를 할수 있게 해주는 객체

대기/ 이행/ 실패 3가지 상태가 있다.

비동기 처리가 완료 되지 않았다면 대기(Pending), 완료 되었다면(Fulfilled), 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

 

async / awiat

⇒ 최근 문법으로 callback 이나 Promise의 콜백 지옥 단점을 보완한다.

await는 async함수 안에서만 동작한다.

 

---

Q. useEffect와 useLayoutEffect 차이에 대해 설명해주세요

 

차이점

1) 컴포넌트 랜더링

useEffect의 경우 컴포넌트 랜더링 -> 화면이 먼저 업데이트 된 후 useEffect를 실행하고

useLayoutEffect는 컴포넌트 랜더링 -> useLayoutEffect 실행 후 화면이 업데이트 됩니다.

 

2) 동기 / 비동기

useEffect는 비동기적으로 실행하고

useLayoutEffect는 동기적으로 실행합니다. => 로직이 복잡할 경우 시간이 오래 걸림.

 

useLayoutEffect 사용 이유

=> useEffect는 DOM이 화면에 그려진 이후에 useEffect 함수를 호출합니다. 화면이 복잡해지면 느려지는 것을 체감할 수 있을정도로 렌더링 시간이 증가하게 됩니다. 그러면 state 초기값을 보게 되버립니다.그래서 useLayoutEffect를 써서 화면에 DOM이 그려지기 전에 호출해서 초기값을 보는 문제 등을 방지 합니다. 

---

Q. Closure 란?

 

클로저는 자바스크립트 고유 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다.

따라서 각기 다른 방식으로 설명하니 정의를 암기하기보다 사례를 이해하고 나만의 정의를 내리는것이 좋다.

⇒ 일단 사전적 정의는 외부함수에 접근할 수 있는 내부 함수 or 이러한 개념.

아래 코드와 같이 함수가 함수를 감쌀때의 외부함수와 내부함수인데 이때 fn3() 엔 l3의 변수 밖에 없지만 콘솔엔 l0, l1, l2, l3가 잘 찍힌다.

-> fn3()실행시에 로컬 스코프엔 변수는 l3 밖에 없지만 closure라는 개념으로 외부함수에서 선언한 변수를 땡겨왔다.

function fn1(){
    function fn2(){
        function fn3() {
            let l3 = 'l3';
            console.log(l0, l1, l2, l3) // l0, l1, l2, l3   <--breakpoint
        }
        let l2 = 'l2';
        console.log(l0, l1, l2)
        fn3();
    }
    let l1 = 'l1';
    console.log(l0, l1);
    fn2();
}
fn1();

디버거로 console.log(l0, l1, l2, l3)에 브레이크포인트를 걸었을 때 스코프는 다음과 같다.

closure라는 개념으로 l2와 l1의 변수를 땡겨오는 모습.

(자바스크립트 변수 가져오는거(객체 prototype과 동일) local 없으면-> script 없으면 -> global인데 Closure있으면 local 다음에 끼어든다)

 

 

 

다우기술 이력서 내느라 일기를 안썼넹 이것저것 하느라 면접준비 자꾸 뒷전이라 큰일.. 뭐 강의도 듣고있고 1일1커밋 중인데 잔디 채워지는게 생각보다 쏠쏠하다 자바스크립트랑 리액트 이론 공부할 때마다 느끼는데 머리박으면서 코드부터 짜서 이론 진짜 부족한거같당ㅋㅋㅋ그래도 재밌게 시작했으니 후회는 없어..☆

요새 책 1시간씩 보고있는데 너무 재밌당 내가 '싫고 좋고 이상하고' 읽고 나서 세상 이슈에 대해 더 알고 싶어졌고 '다정한 것이 살아남는다' 보고 인류학 관련된 책을 더 찾아보고 싶었고 지금은 '정의란 무엇인가' 보면서 독서 뽕맛 제대로 느끼고있다. 마이클 샌델 천재아님? 철학적인 주제들을 이렇게 재밌게 풀어내는거 할아버지 폼 미쳤음 진짜 꼭보세요 추천..b 

(잠깐 찾아보니까 진짜 천재 맞네요 27세 최연소 하버드 교수되셨네ㅎㅎ)

 

며칠 좀 오락가락 하는중이다 나같은 고민 하는 사람 많을거 같은데, 지금 이 시점에 강의를 듣는게 맞는지 블로그 쓰는게 맞는지 책을 읽고있는게 맞는지 궂이 지금 이시점에 해야하는건지 뭐 그런 쓸데없는 생각? 극 S라 별 고민 안하고 한가지 씩 하는 성격인데 뭐 이력서 슬슬 공장처럼 던져야되는데 좀 더 준비하고 있으니까 잡 생각이 끼어드는거 같다. 뭐 다우기술 자소서 작성하면서 좀 리뉴얼했으니까 월요일부턴 던져보자...ㅎ