[DAY-69] React 심화(1)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
TypeScript 정말 정말 배우고 싶었다.
React와 Vue부터 해야하기에 기다리고 있었지만 드디어 때가 왔다.
지금까지 만든 모든 프로젝트 리팩토링 할 생각에 너무 신난다.😉
역시 새로운걸 배우고 적용하는 것은 너무 즐거워

useImperativeHandle Hook

useImperativeHandle Hook은 평범한 컴포넌트 내부가 아닌 라이브러리 등 특수한 컴포넌트에 사용된다.

ref(forwardRef, useRef)를 이용하면 사용자 정의 함수를 만들어 상위 컴포넌트에 제공할 수 있다.

즉 상위 컴포넌트가 함수를 통해 하위 컴포넌트를 제어할 수 있게 된다.

여기서 useImperativeHandle Hook을 사용하면, 하위 컴포넌트를 제어할 여러 함수들을 정의할 수 있다.

// forwardRef로 정의된 Input 컴포넌트
const inputRef = useRef();
useImperativeHandle(ref, () => {
  clear: () => {
    inputRef.current.value = "";
  };
  focus: () => {
    inputRef.current.focus();
  };
});

return (
  <>
    Input: <input ref={inputRef} />
  </>
);

컴포넌트 심화

React 개발자가 가장 많이 하는 고민은 단연 컴포넌트는 어떻게 설계해야 할까? 이다.

먼저 아키텍처부터 살펴보자.

아키텍처에는 여러 의미가 있지만, 우리가 일을 잘 하기 위해 모듈의 구현과 나누는 방법을 정함이라고 말할 수 있다.

그렇다면 모듈(컴포넌트)에서는 어떠한 부분이 중요할까? 응집도와 결합도가 있다

1. 응집도

• 모듈 내 포함된 요소들이 서로 연관되어 있는 정도 즉, 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐 있는지를 나타낸다.
• 높은 응집도일수록 좋은 설계
• 응집도가 높을 수록 하나의 책임에 집중하고, 독립성을 높이며, 우리가 수정하기 위한 요소를 빠르게 찾을 수 있다.

응집도를 높이기 위한 방법

• 공통 폐쇄 원칙

같은 이유로 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다는 원칙이다.

즉 객체 지향 원칙인 단일 책임 원칙을 컴포넌트 관점으로 바라본 것 이다.

하지만 과하게 적용하면 재사용성이 줄어들 수 있다.

• 공통 재사용 원칙

모듈 내의 기능들은 함께 재사용이 될 수 있어야 한다는 원칙이다.

반대로 이야기하면 함께 재사용이 될 수 없다면 분리해야 한다는 뜻이다.

과하게 적용하면 개발 용이성이 줄어들 수 있다.

공통 폐쇄 원칙과 공통 재사용 원칙은 서로 위배된다고 말할 수 있다.

즉, 상황에 따라 공통 폐쇄 원칙(적은 수의 컴포넌트, 재사용성 낮음)과 공통 재사용 원칙(많은 수의 컴포넌트, 재사용성 높음)

이 둘 사이를 적절하게 조절하는 것이 개발자의 능력이다.

2. 결합도

• 다른 모듈과의 의존성에 대한 정도
• 모듈과 모듈 사이의 관계가 어느 정도인가를 나타냄
• 낮은 결합도일수록 좋은 설계
• 결합도가 높을 수록 수정에 대해 영향을 미치는 정도가 증가

결합도를 낮추기 위한 방법

• 안정된 의존성 원칙

더 안정된 모듈을 의존하자는 원칙이다.

즉 의존하는 모듈이 적고, 의존되는 모듈이 많을 수록 안정적인 모듈(컴포넌트)이다.

안정성 지표는 Fan-out / (Fan-in + Fan-out)으로 계산이 가능하다.

따라서 0에 가까울수록 안정되고 1에 가까울수록 불안정한 컴포넌트이다.

Fan-out : 의존되는 것 / Fan-in: 의존하는 것

• 안정된 추상화 원칙

컴포넌트는 안정된 만큼 추상적이어야 한다는 원칙이다.

즉 컴포넌트의 안정성이 0에 가까울수록, 추상성은 1에 가까워야 한다.

추상성은 추상 클래스 수 / 클래스 수로 계산한다.

(하지만 React 컴포넌트는 UI 요소가 포함되어있어 해당 공식을 적용할 수는 없다.)

// 어떠한 것도 들어올 수 있는 추상적인 컴포넌트 예시
const CanBeAnything = ({ children }) => {
  return <Fragment>{children}</Fragment>;
};

3. 컴포넌트 단위

좋은 컴포넌트가 가져야 하는 응집도와 결합도에 대해 알아봤다.

그렇다면 어떤 단위로 컴포넌트를 나눠야 할까?

프론트는 변화가 큰 소프트웨어이다. 즉 백엔드처럼 기능, 도메인 단위로 레이어를 나누기 애매하다.

따라서 웬만하면 추상화 단위(Tag, Style)로 나누는 것이 편하다.

TypeScript

타입스크립트는 마이크로소프트에서 만들었고, 말 그대로 타입이 적용된 자바스크립트라는 의미이다.

1. 장점

• 타입이 존재하면 컴파일 단계에서 미리 오류를 감지할 수 있으므로 안정성을 가진다.
• 타입을 보고 해당 로직이 어떤 일을 하는지 미리 알 수 있어 가독성이 좋다.

2. 단점

• 초기 설정이 필요하다.
• 타입이 강제적이다보니, 스크립트 언어의 유연성이 낮아진다.
• 컴파일 시간이 길어질 수 있다.

TypeScript 문법

1. 타입 주석과 타입 추론

타입 주석은 변수, 상수 혹은 반환 값이 무슨 타입인지를 나타내는 것을 의미한다.

타입 추론은 해당 변수가 어떤 타입인지 추론하는 것이다. (이를 생략하면 컴파일 타임에 알아낸다.)

// 1. 타입 주석
let a: number = 1;
let b: boolean = false;
let c: string = "TypeScript";
let arr: number[] = []; // number 타입의 변수만 배열에 넣을 수 있다.
let i: "good" = "good"; // i라는 변수는 'good'의 문자열만 들어갈 수 있다.
let h: any = 3; // 아무 값이나 들어갈 수 있다.

function add(a: number, b: number): number {
  return a + b;
}

// 2. 타입 추론 (number 타입임을 알 수 있다.)
let b = 2;

2. 인터페이스

객체의 타입을 정의하는 방법이다. interface라는 키워드로 가능하다.

interface Company {
  name: string;
  age: number;
  address?: string; // 선택 속성(Optional)
}

const programmers: Company = {
  // 무조건 name, age가 들어간다.
  // 다만 address는 선택 속성이므로 undefined가 들어갈 수 있다.
};

또한 정의 후 바로 값을 할당할 수 있는 익명 인터페이스도 사용할 수 있다.

코드 내에 딱 한번만 사용된다면 해당 형식을 사용하는 것이 더 깔끔하다.

const person: {
  name: string;
  age?: number;
} = {
  name: "Jung Ji Young",
  age: 25,
};

3. tuple

배열을 Tuple로 이용하는 방법이 있다.

const tuple: [string, number] = ["JiYoung", 25];

4. enum

열거형을 사용하는 방법이다.

enum Color = {
	RED, // 0
	ORANGE, // 1
	YELLOW // 2
} // RED = 'red' 등으로 커스텀할 수 있다.

const color = Color.YELLOW; // 2

5. 대수 타입

여러 자료형의 값을 가질 수 있게 하는 방법이다.

합집합 타입과 교집합 타입이 있다.

// 1. 합집합 타입
let numOrStr: number | string = 1; // number 또는 string을 넣을 수 있다.

// 2. 교집합 타입
// 하나의 변수가 number이고 string일 수는 없다. 즉 원시 타입에서 사용이 불가능하다.
interface Name {
  name: string;
}

interface Age {
  age: number;
}

let Jiyoung: Name & Age = {
  // Name, Age 둘 다 넣어줘야 한다.
  name: "Jung JiYoung",
  age: 25,
};
type Person = Name & Age; // 새로운 타입을 만들어 낼 수 있다.

6. Optional

선택 속성을 만들 수 있으며, 작성되지 않은 데이터에 대해 예외처리를 해줄 수 있다.

interface Post {
	title: string;
	content: string;
}

interface ResponseData {
	post?: Post;
	message?: string;
	status: number;
}

const response: ResponseData[] = {
	{
		post: {
			title: 'Hello',
			content: 'How are you?'
		},
		status: 200
	},
	{
		message: 'Server Error',
		status: 500
	}
}

console.log(response[1].post?.title);
// title이 없어도 오류가 나지 않고 undefined가 출력된다.
// 즉 데이터가 없다면 자동으로 undefined를 반환하는 의미이다.

7. Generic

하나의 인터페이스로 여러 타입을 이용할 수 있게 하는 방법

interface Value<T> {
  value: T;
}

const value: Value<number> = {
  value: 1,
};
const value: Value<string> = {
  value: "1",
};

제네릭은 함수에도 이용할 수 있다.

function toString<T>(a: T): string {
  return `${a}`;
}

console.log(toString<number>(5));

8. Partial, Required, Pick, Omit

기존 interface를 재활용 할 수 있게 해준다.

interface User {
  id: number;
  name: string;
  age: number;
  createdAt?: string;
  updatedAt?: string;
}

// 1. partial: 모든 필드를 Optional로 만들어준다.
const partial: Partial<User> = {};

// 2. Required: 모든 필드를 필수 속성으로 만들어준다.
const required: Required<User> = {
  id: 1,
  name: "Jiyoung",
  age: 25,
  createdAt: "",
  updatedAt: "",
};

// 3. Pick: 특정 필드만 골라서 사용할 수 있다.
const pick: Pick<User, "name" | "age"> = {
  name: "Jiyoung",
  age: 25,
};

// 4. Omit: 특정 필드만 빼고 사용할 수 있다.
const omit: Omit<User, "id" | "createdAt" | "updatedAt"> = {
  name: "Jiyoung",
  age: 25,
};

이 4가지 문법은 섞어서 사용할 수 있다.

const mixed = Omit<User, 'id' | 'createdAt' | 'updatedAt'> & Pick<Partial<User>, 'age'> = {
	name: '', // age는 Optional이 됩니다.
}

9. extends

특정 인터페이스를 상속받아 인터페이스를 확장할 수 있다.

interface Time {
	hour: number;
	minute: number;
	second: number;
}

// DateTime은 Time 필드 외에도 정의한 속성들을 받을 수 있다.
interface DateTime extends Time {
	year: number;
	month: number;
	day: number;
}

// 이렇게 Pick, Omit, Partial, Required를 사용할 수 있다.
interface CustomTime extends Pick<Time, 'hour' | 'minute'>

---

출처

프로그래머스