React 심화
useImperativeHandle 사용자 정의 Hook
useImperativeHandle: 상위 컴포넌트에서 하위 컴포넌트를 이용하기 위한 함수들을 정의한 Hook- 라이브러리 등의 특수한 컴포넌트에서 상위 컴포넌트에서 하위 컴포넌트를 함수호출을 통해 제어하는 목적으로 사용
Ref를 통한 제어
컴포넌트를 잘 설계하기 위한 방법
- 컴포넌트를 어떻게 설계해야 하는가?
- 모듈에서 중요한 것 ... 응집도 결합도
응집도
- 모듈 내의 요소들이 서로 연관되어 있는 정도 ... 높을수록 좋은 설계
공통 폐쇄 원칙: 같은 이유로 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다는 원칙 ... 적은 수의 컴포넌트 / 재사용성 낮음
공통 재사용 원칙: 모듈 내의 기능들은 함께 재사용이 될 수 있어야 한다는 원칙 ... 많은 수의 컴포넌트 / 재사용성 높음
위 상반된 두 원칙을 상황에 따라 골고루 사용해야 좋은 설계 방법 ... 정답은 없음 - 개발자의 수가 많다면 재사용성에서 이점을 가지는 공통 재사용 원칙이 더 유리할 수 있고, 개발자의 수가 적다면 컴포넌트 관리가 용이한 공통 폐쇄 원칙이 유리할 수 있다.
결합도
- 다른 모듈과의 의존성에 대한 정도 ... 낮을수록 좋은 설계
안정된 의존성 원칙: 더 안정된 모듈을 의존하자는 원칙
안정된 추상화 원칙: 컴포넌트는 안정된 만큼 추상적이어야 한다는 원칙
타입스크립트 소개
- 타입이 적용된 자바스크립트
- 장점
- 타입이 있다는 것 ... 안정성 / 컴파일 단계에서 미리 오류를 감지할 수 있음
- 가독성이 좋음 ... 타입을 보고 해당 로직이 어떤 기능을 하는지 알기 쉬움
- 단점
- 초기설정이 필요함
- 스크립트 언어의 유연성이 낮아짐
- 컴파일 시간이 길어질 수 있음
타입스크립트의 문법
- 타입 주석 / 타입 추론
타입 주석: 변수, 상수, 반환 값의 타입을 나타냄
let a: number = 1;
타입 추론: 해당 변수가 어떤 타입인지 추론 (생락할 시, 컴파일 때 알아냄)
let b = 2; - 인터페이스
객체의 타입을 정의하는 방법 ...interface라는 키워드로 사용 / Object 형식의 익명 인터페이스로 바로 할당해 줄 수도 있다.
interface ObjectName {
name: string;
age: number;
location?: string;
// location? ... 선택 속성 (undefined 가 가능함)
...
}- tuple
값을 묶는 방법 (배열)
const tuple: [string, number] = ['string', 123]; - Enum
값을 열거하는 방법
enum Pruits {
A = 'apple',
B = 'banana',
C = 'chery'
};
const pruit = Pruits.A;- 대수 타입
여러 자료형의 값을 가질 수 있게하는 방법 ... 합집합 타입 / 교집합 타입
교집합 타입은 원시 타입에서는 사용할 수 없음 (number면서string불가능) ...interface등에서 사용할 수 있음
합집합 타입
let numOrStr: number | string = 123
// number 혹은 string 타입이 가능, 초기값은 number
numOrStr = 'srting' // string 가능 ... 다른 타입일 시 에러
교집합 타입
interface Name {
name: string;
}
interface Age {
age: number;
}
let info: Name & Age = {
name: '내이름',
age: 27
}
- optional
선택 속성을 편하게 이용할 수 있는 방법 - Generic
하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법 ... 함수에도 사용할 수 있다.
interface Value<T> {
value: T;
// <T> 를 통해 외부에서 원하는 타입을 지정하여 사용할 수 있다.
}
const value: Value<number> = { ... }
function toString<T>(a: T): string { ... }- Partial, Required, Pick, Omit
기존 interface 를 재활용 할 수 있게 한다.
Partial: 모든 필드가 Optional 이 된다.
Required: 모든 필드가 Required 가 된다.
Pick: 특정 필드만 골라서 사용할 수 있다.
Omit: 특정 필드만 빼고 사용할 수 있다.
&연산자를 통해 위의 문법을 같이 사용할 수 있다. - extends
특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.
회고
타입스크립트를 처음 배우는 시간이었다. 팀프로젝트에서 Prop-types 를 통해 Prop 의 타입을 정해주고, defaultProps 로 기본값을 지정해 주었던 경험이 있어서 이해가 좀 더 잘 된것 같다. 물론 더 복잡한 타입을 다루기에 연습이 필요할 것 같다.
프론트엔드