프론트 엔드 6주 1일차

Destructuring Assignment(구조 분해 할당)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 자바스크립트 표현식입니다.

 

배열 분해하기

위의 예시 코드를 보면 arr의 두 원소를 one, two로 각각 분해하여 할당해준 것을 확인 할 수 있다.

 

배열의 갯수가 많아진다면 선택할 값만을 뽑고 나머지를 ...을 사용해서 표현할 수 있습니다.

위 코드를 실행하면 콘솔창에 a, b, ["c","d","e","f"] 가 출력된다.

기본값

만약 할당하고자 하는 변수의 개수가 분해하려는 배열의 원소보다 많더라도 에러를 발생하지 않고 할당 값이 없으면 undefined로 할당합니다. undefined로 할당하고 싶지 않다면 기본값을 =을 통해서 설정할 수 있습니다.

예시 코드

위 예시 코드를 실행하면 a b c D가 콘솔창에 출력된다.

 

 

객체 분해하기

기본 문법 

위의 예시와 같이 객체의 key 이름을 이용해서 그 값을 변수로 받아오는 것이 가능하다 위 코드의 결과는 콘솔창에 max, 12, 20000이 출력된다.

 

중첩 구조 분해

배열 안의 객체나 배열, 객체 안의 배열이나 객체도 위와 같은 과정을 반복하는 것으로 분해하는 것이 가능하다. 이를 테면 아래의 예시 코드들과 같다. 

 

예시 코드

Rest 패러미터

객체의 요소를 지우는 방법에는 대표적으로 2가지가 있다

 

1. Delete 사용

2. Rest 패러미터

대부분의 경우 원본을 건드리게 되는 delete 보다는 원본과 분리된 Rest 패러미터를 활용하는 쪽을 더 선호하게 된다.

 

Rest 사용 예시

 

위와 같이 객체 요소 중 제거하고 싶은(위의 경우 age)를 따로 빼두고 newProfile이라는 이름으로 새로운 객체를 스프레드 연산자를 이용해서 나타내는 것으로 프로필에서 age를 뺀 newProfile을 새로 정의할 수 있게 된다.

 

Custom Hooks

함수 내부에 useState, useEffect와 같은 hook을 사용하는 함수를 Custom hook이라고 부른다.

 

사용 예시

위의 코드를 보면 Counter의 리턴값인 counter와 counterUp을 객체형태로 구조분할할당 받아서 2번째 코드 처럼 사용하였습니다.

 

 

 

타입스크립트 Generic

타입 스크립트 타입

1. any

어떤 타입이 입력되어도 전부 허요하는 타입으로 이걸 이용하면 타입 스크립트를 사용하는 의미가 없기 때문에 사용을 삼가하는 것이 좋다.

 

2. unknown

타입이 지정되지 않은 상태로 연산에서 오류가 발생할 수 있음을 경고하여 any보다는 사용하기 용이합니다.

 

3. generic

generic을 사용하면 인자에 들어오는 타입을 그대로 사용하여 타입을 지정하게 된다.

 

타입 예시

위의 예시를 보듯아 타입의 이름을 위와 같이 명시하고 리턴 타입도 이 명시한 타입을 호출하여 명시할 수 있습니다. 또한 이를 통해서 HOC, HOF의 타입도 명시할 수 있습니다.

 

알고리즘

 

코딩 결과