[TIL] 2021 10 09 - 리액트 심화주차

박하린·2021년 11월 18일

항해99

목록 보기

10/27

🔑 useRef()와 useState()는 변수에 관련된 훅이다. 두 훅의 차이점은 무엇일까?

큰 차이점은 렌더링이다. setState로 input값의 current value 값이 변경될 때 상태값을 변경해주면 input에 입력값이 바뀔 때마다 렌더링 될 것이고, useRef훅을 사용해서 input값에 참조를 걸어주면 참조된 값만 읽어서 그 값이 바뀔 때 ? 렌더링이 한 번만 실행된다.

state를 업데이트하는 것은 컴포넌트 리렌더링을 트리거하지만 ref는 아니다.
상태 업데이트는 비동기적(렌더링 한 후 업데이트 됨)이지만 참조는 동기적(업데이트된 값은 즉시 사용될 수 있음)입니다.

🔑 useEffect()는 언제 작동하는 걸까?

마운트 될 때만 실행하고 싶을 때

의존성 배열이 비어있을 때에는 처음 렌더링될 때 한번만 실행 된다.
특정 값이 업데이트될 때만 실행하고 싶을 때

함수의 두번째 파라미터인 배열 안에 상태를 변경하고 싶은 값을 넣어준다.

특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이되고, 지정한 값이 바뀔 때에도 호출이 된다. 그리고, 언마운트시에도, 값이 바뀌기 직전에도 호출이된다.
화면이 사라질 때

useEffect에서는 함수를 반환할 수 있는데 이를 clean up 함수라고 부른다.

의존성 배열을 비우게된다면 컴포넌트가 사라질 때 호출된다.

🔐 s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?

실제 route는 index.html 하나이기 때문에, 파일이 없다고 오류를 내는 것(Route는 React-Router-Dom에 의해 사용 가능) s3 설정시 index문서와 오류문서를 index.html로 해놓으면 오류가 나도 index.html로 가면서 React-Router-Dom의 라우팅을 탈 수 있게 된다.

🔐 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요?

✅ og-tag

메타태그는 웹페이지의 제목이나 이미지, 간단한 설명을 검색엔진에 알려주는 역할을 힌디.
react-helmet 패키지를 받아서 <Helmet> 으로 og태그를 감싸주면 적용된다.
og:title og:description og:image content 속성에 데이터를 넣어주면 미리보기로 사이트에 대한 정보를 볼 수 있다.

🔐 리덕스에서 미들웨어 청크의 역할은 뭘까요?

✅ redux-thunk

리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어
이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치할 수 있다. 함수를 디스패치할 때에는 , 해당 함수에서 dispatch 와 getState 를 파라미터로 받아와줘야 한다. 이 함수를 만들어주는 함수를 우리는 thnuk라고 부른다.

🔐 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?

✅ 비동기

비동기 프로그래밍 등장

비동기(Asynchronous)란 동시에 존재하거나 발생하지 않는다는 사전적 의미를 갖는다. 비동기 프로그래밍에서의 비동기는 큰 맥락에서 볼 때 사전적 의미와 상통하지만 '동기가 아닌'이라는 반어적 의미에 좀 더 가깝다고 할 수 있다.
일반적으로 우리가 작성한 프로그램은 하나의 스레드 안에서 동기적인 흐름을 가진다. 함수가 호출될 경우 콜스택에 해당 함수 컨텍스트에 관한 정보가 쌓이고 함수 내부의 코드를 위에서부터 아래로 실행시키고, 함수 실행이 종료되면 해당 컨텍스트가 콜스택에서 POP된 후 함수 호출문 아래부터 코드의 흐름이 다시 전개된다. 동기적 프로그래밍의 단점은 어떤 함수를 호출하거나 코드를 실행할 때 그 코드를 연산하기 위한 비용이 많이 들어도 그 연산을 마쳐야만 다음 코드를 실행할 수 있다는 것이다. 이를 블로킹(Blocking)이 일어났다고 표현한다. 자바스크립트는 싱글 스레드 기반의 언어이므로, 자바스크립트 엔진은 시간이 오래 걸리는 작업을 묵묵히 기다린 후 자신의 임무를 계속해서 수행해나가는 것이다. 이러한 현상은 불필요한 낭비를 초래할 수 있고, 이것은 그대로 사용자에게 전가된다. 이러한 문제를 해결하기 위해 비동기 프로그래밍 패러다임이 등장하기 시작했다!

자바스크립트에서 비동기 처리 방식

자바스크립트는 실행 환경에 의존적이기 때문에 비동기 프로그래밍이 가능하다. 여기에는 브라우저에서 제공하는 Web-API와 NodeJS에서 제공하는 libuv가 있다.
자바스크립트 엔진은 코드를 위에서부터 아래로 순차적으로 처리한다. 이 때 비동기 API를 호출하는 코드를 만나면 해당 코드를 실행시키고 바로 다음 코드를 실행시킨다. 이 때 비동기 API를 제공한 주체(실행환경인 브라우저와 libuv)는 자바스크립트 엔진이 다음 코드를 실행시키는 것과 거의 동시에 해당 함수를 실행한다. 자바스크립트 엔진은 엔진대로 일을 하고, 그와 동시에 조력자가 자신의 일을 대신 해주는 것이다. 이처럼 자바스크립트에서의 비동기 프로그래밍이란 어떤 코드를 병렬적으로 실행시키는 프로그래밍이라고 말할 수 있으며, 이는 위에서 서술한 비동기라는 사전적 의미와는 반대로 보인다. → 그러나, 사전적의미와 상통하는 부분이 있다고 한 것은. 비동기 API를 호출하고 반환된 값은 자바스크립트 엔진이 다루고 있는 값과 동시에 존재하지 않기 때문이다. 과거 promise가 없던 시절에는 비동기 API호출의 결과값은 철저하게 콜백 함수 내부 스코프에 종속되어있었다. 이것은 여러가지 문제를 야기시키는데
- 정말로 콜백함수에 API의 리턴값이 무엇인지 알 수 있나? → 기존 콜백 패턴을 적용한 프로그래밍에서는 함수의 첫 번째 파라미터에 에러를, 두 번째 파라미터에 리턴값을 정의 내린 후 코드를 작성하였다. 우리는 콜백함수가 정상적으로 실행되기를 바라면서 프로그래밍을 할 수 밖에 없었다.
- 이러한 리턴값을 받아서 코드를 작성하고 싶은데, 그러면 콜백 함수 내에서 다시 비동기 API호출을 해야하는 것인가? → 이 두 번째 질문은 콜백헬 이라는 함수의 중첩 구조 현상을 야기시킨다.

프로미스의 등장

콜백 패턴을 적용한 프로그래밍에서 발생한 제어의 역전 문제를 해결하기 위해 자바스크립트 개발자는 다양한 라이브러리를 사용하기 시작하였고, 여러 라이브러리들 중 Q는 나중에 실행되는 결과에 대한 약속을 값으로 추상화시켰다. 이 모델은 2015년, 자바스크립트 내장 객체인 프로미스로 자리잡게된다. 이 객체는 '미랫 값'이다. 우리는 이 미랫값을 가지고 코드 내부 어디에서든지 쓸 수 있게 됨으로써 기존 제어의 역전을 재역전시킬 수 있게되는것

✅ 프로미스

비동기 처리 시점을 명확히 표현해주기 때문에 전통적인 콜백 패턴이 가진 단점을 보완해준다.
비동기 연산이 종료된 후 결과를 알기 위해 사용하는 객체
Promise 생성자 함수를 new 연산자와 함꼐 호출하면 프로미스 객채를 생성한다. Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달 받는다. 이 콜백 함수는 resolve와 reject 함수를 인자로 받는다.

🔐 TDZ(Temporal Dead Zone/일시적 사각지대)란?

✅ TDZ

변수의 선언 단계와 변수의 초기화 단계 사이의 변수에 접근할 수 없는 지점 즉, 초기화되지 않은 변수가 있는 곳을 일시적 사각지대라고 한다.
변수의 생성과정은 1) 선언 2) 초기화 3) 할당의 단계로 이뤄진다.
let과 const는 var와는 다르게 선언단계와 초기화 단계가 따로 분리되어 실행됨. 그래서 선언 단계와 초기화 단계 사이에서는 실행 컨텍스트에는 변수를 등록했지만 메모리가 할당되지 않은 상태라 ReferenceError 가 나옴. 이런 사각지재를 TDZ라한다.

👉 이벤트 캡처링, 버블링

조원 분의 달력 과제를 보다가 모달 창에서 모달 밖의 모달을 감싸는 부분을 클릭을 해도 모달이 꺼지도록 하신 코드를 보고 이벤트 캡쳐링, 버블링이라는 개념을 알게 되었다.
졸려서 내일 다시보기.. 버블링과 캡처링

하루 정리

오늘은 주특기 심화주차 마지막날
오전에 항해에서 주어진 키워드를 바탕으로 팀원분들과 자료를 찾아서 공부하고, 각자 알고 있는 내용, 알게 된 내용을 공유하는 시간을 가졌다.
오후에는 항해톡발표를 들었다.
발표가 끝나고 팀테이블로 돌아와서 코드리뷰를 제안을 해봤다..! 자신의 과제와 코드를 보여주면서 기능이 어떻게 동작하는지 흐름을 따라 코드를 리뷰했다. 다시 한번 내가 짠 코드를 돌아보게 되는 좋은 시간이였다. 미니 프로젝트에 가서도 시간이 된다면 코드리뷰를 할 수 있으면 좋겠다. 👍
5시부터는 mingle saturday에서 첨 보는 백엔드 분들이랑 재밌게 놀았다.