-
[ 모던 리액트 : Deep Dive ] - 01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트web 2023. 12. 6. 06:47
🚀 클로저
✅ 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합
= 변수가 코드 내부에서 어디서 선언되었는지를 조합해 코딩하는 기법
✅ 스코프 = 변수의 유효범위. 스코프에 따라 어휘적 환경이 결정된다.
- 전역 스코프- 함수 스코프 : 함수 블록 내부 실행이 아니라면 전역적 작동
-> 함수 레벨 스코프를 갖는 var가 아닌 블록 레벨 스코프를 갖는 let으로 수정하면 된다.✔️ 클로저와 useState
// 클로저 function Counter () { var counter = 0 return { increase: function () { return ++counter }, counter: function () { console.log(' counter에접근!' ) return counter } } }, var c = Counter( ) console. log (c. increase()) //1 // 리액트에서의 클로저, useState function Component(){ const [state, setState]=useState() function increase(){ setState((prev)=>prev+1) } }
위의 코드를 살펴보면, useState는 리액트에서 보여지는 가장 대표적인 클로저임을 알 수 있다. 리액트가 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어오면서, 클로저와 함수형 컴포넌트는 굉장히 밀접한 개념이 되었다고 한다.
🩵 클로저는 부수 효과가 없고 순수해야 한다는 목적을 달성하기 위해 적극적으로 사용된다.
🩵 클로저는 공짜로 쓸 수 있는 것이 아니다. = 불필요한 작업이 있다면 불필요한 메모리를 잡아먹고, 성능에 악영향을 미친다.
🚀 이벤트 루프와 비동기 통신의 이해
✅ 싱글 스레드 자바스크립트
= 동기 방식으로만 처리할 수 있다.= 하나의 프로그램 실행은 하나의 프로세스를 가진다.
= 코드를 한 줄 한 줄 실행한다.
-> 멀티 스레드는 내부적으로 처리가 복잡하기 때문.
But! 소프트웨어가 복잡해지면서 하나의 프로그램에서 동시에 여러가지 작업이 이루어져야했다.
-> 하나의 프로세스에서 여러 개의 스레드를 만들 수 있게 되면서 동시다발적 작업이 처리가능해졌다.
✅ 동기식으로 작동하는 자바스크립트 세상에서 비동기 코드를 처리하는 방법
= 메인 스레드가 아닌 태스트 큐가 할당되는 별도의 스레드에서 수행되기 때문
-> 별도의 스레드에서 이벤트 루프가 일어나고, 콜백이 실행가능하면 태스크 큐에서 꺼내서 수행
이벤트 루프 = 호출 스택이 비어있는지 여부를 확인하는 것
태스크 큐 = 실행해야 할 테스크의 집합(콜백이 들어옴)
🩵 자바스크립트는 싱글 스레드로 이루어져서 비동기 처리가 어렵지만, 자바스크립트 코드 실행 외에 태스크 큐, 이벤트 루프, 마이크로 태스크 뷰, 브라우저, Node.js API 등이 적절한 생태계를 이루어서 비동기 처리가 가능해졌다.
🚀 리액트에서 자주 사용하는 자바스크립트 문법
✅ 구조 분해 할당 : 리액트 props에서 값을 바로 꺼내올 때 자주 사용됨
- undefined일 경우 기본값을 사용할 수 있다.
✅ Array 프로토타입의 메서드
- map
- filter
- reduce
- forEach : 반환값이 undefined로 의미가 없다. 또한, 그 무엇을 이용해도 중간에 순회를 멈출 수 없다.
🌱 특히 공식문서에 따르면, React state 내에서 배열을 다룰 땐, 왼쪽 열에 있는 함수들의 사용을 피하는 대신, 오른쪽 열에 있는 함수들을 선호해야 합니다. 라고 나와있다. push, pop 등 배열을 변경하는 방식보다, map, filter, [...arr]와 같이 새 배열을 반환하는 방식을 이용하는 것이 더 선호된다고 한다. (하지만, 직접적으로 배열을 변경하지 않고, 새 변수를 선언해서 push를 이용하거나 하는 방식을 하면 안된다의 의미는 아닌 듯 하다.)
🚀 타입스크립트
✅ TypeScript is JavaScript with syntax for types
- 타입스크립트는 빌드 타임에 타입 체크를 수행할 수 있게 해준다.
🍯 yarn typecheck를 하면 타입에 문제가 없는지 전체적으로 수행해주기 때문에 애용하고 있다.
✅ any 대신 unknown을 사용하자
- unknown : 어떤 타입인지 모름 <-> never : 어떠한 타입도 들어올 수 없음을 의미
🍯 개인적으로, api 통신 후 response를 사용하지 않는다면 unknown 타입을 주고 있다.
-> unknown을 주면 오류가 떠서 결국 any를 사용한 경험이 많은데, unknown은 그냥 사용할 수 없고, 적절히 타입을 좁혀야(=type narrowing) 사용할 수 있다.
✅ 타입 가드(=타입을 좁히는 데 도움을 주는 것)를 적극 활용하자
✔️ instanceof : 지정한 인스턴스가 특정 클래스의 인스턴스인지 확인
✔️ in : 어떤 객체에 키가 존재하는지 확인
✔️ 제네릭 : 다양한 타입에 대응할 수 있도록 도와주는 도구
// Type 제네릭 : 우리는 무엇이 반환되는지 표시하기 위해 인수의 타입을 캡처 function identity<Type>(arg: Type): Type { return arg; }
✔️ 인덱스 시그니처 : 객체의 키를 정의하는 방식
-> 존재하지 않는 키로 접근하면 undefined를 반환하기 때문에 키를 좁힌다.
(1) record 이용
(2) 타입을 사용한 인덱스 시그니처- 타입 스크립트의 핵심 원칙 : 타입 체크를 할 때, 그 값이 가진 형태에 집중한다! = 덕타이핑 = 구조적 타이핑
🌱 사실 리액트에서 타입스크립트를 잘 쓰고 있는지에 대한 의문이 지속적으로 있었는데, 이 내용에 유의해서 코드를 잘 짜야겠다.
'web' 카테고리의 다른 글
[ 모던 리액트 : Deep Dive ] - 03장 리액트 훅 깊게 살펴보기 useState (1) 2023.12.21 [ 모던 리액트 : Deep Dive ] - 02장 리액트 핵심 요소 깊게 살펴보기 (0) 2023.12.15 [ 리액트 ] 데이터를 효과적으로 관리하는 방법에 대하여 - 리액트 쿼리와 커스텀 훅 (0) 2023.07.21 리액트 스타일 라이브러리 (StyledComponents, Stitches, Tailwind) 비교 (0) 2023.06.14 리액트의 데이터 관리 React Query vs Asynchronous Recoil (7) 2023.05.08