[ 모던 리액트 : Deep Dive ] - 01장 리액트 개발을 위해 꼭 알아야 할 자바스크립트

🚀 클로저

 

✅ 클로저란? 함수와 함수가 선언된 어휘적 환경의 조합

     = 변수가 코드 내부에서 어디서 선언되었는지를 조합해 코딩하는 기법 

 

✅ 스코프 = 변수의 유효범위. 스코프에 따라 어휘적 환경이 결정된다. 
    - 전역 스코프 

    - 함수 스코프 : 함수 블록 내부 실행이 아니라면 전역적 작동
                          -> 함수 레벨 스코프를 갖는 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) 타입을 사용한 인덱스 시그니처 

 

- 타입 스크립트의 핵심 원칙 : 타입 체크를 할 때, 그 값이 가진 형태에 집중한다! = 덕타이핑 = 구조적 타이핑

 

🌱 사실 리액트에서 타입스크립트를 잘 쓰고 있는지에 대한 의문이 지속적으로 있었는데, 이 내용에 유의해서 코드를 잘 짜야겠다.