[React] useCallback
·
React
❓ 정의- 함수를 메모이제이션하는 훅으로, 동일한 의존성 배열을 가지는 한 매번 새로운 함수가 생성되는 것을 방지하는 역할을 한다.▶ 기본 사용 예시const memoizedCallback = useCallback(callbackFunction, [dependencies]);첫 번째 인자로 메모이제이션할 함수를 받고, 두 번째 인자로 의존성 배열을 받는다.❗ 사용이유✅ 불필요한 렌더링 방지 -> 성능 최적화- React에서 함수는 컴포넌트가 리렌더링될 때마다 새로 생성되는데, useCallback을 사용하면 의존성이 변경되지 않는 한 동일한 함수 객체를 재사용할 수 있다!💥 주의1️⃣ 모든 함수에 useCallback을 적용할 필요는 없음! - 불필요하게 사용하면 오히려 성능이 저하될 수 있다.2️⃣ ..
[Typescript] 제네릭(Generic)
·
Typescript
❓ 정의- 일반화된 데이터 타입- 함수, 타입, 클래스 등에서 내부적으로 사용될 타입을 미리 정해두지 않고 타입 변수를 사용해서 해당 위치를 비워놓은 다음, 실제로 그 값을 사용할 때 외부에서 타입 변수 자리에 타입을 지정하여 사용하는 방식= 코드를 작성할 때 타입을 고정하지 않고, 사용할 때 타입을 지정할 수 있도록 하는 기능- any와 다른 점은 아무 타입이나 무분별하게 받는 것이 아니라, 배열 생성 시점에 원하는 타입으로 특정 가능하다는 것▶ 기본 사용 예시type ExampleArrayType = T[];const array1: ExampleArrayType = ["치킨", "피자"];❗ 사용이유✅ 다양한 타입을 받게 함으로써 코드를 효율적으로 재사용✅ 의도를 명확하게 드러냄으로써 가독성 향상 ✅..
React는 라이브러리, Next.js는 프레임워크?
·
Next.js
사용했던 프레임워크를 정리하다가 React를 프레임워크라고 착각했었는데, 이참에 확실히 정리해두고자 한다.React와 Next.js는 제공하는 기능의 범위와 개발 흐름을 강제하는 정도가 다르다.❓ React가 라이브러리인 이유✅ 역할- React는 사용자 인터페이스(UI)를 구축하기 위한 도구로, 컴포넌트 기반 개발을 지원한다. 하지만 애플리케이션의 전체적인 구조(라우팅, 데이터 페칭, 서버 렌더링 등)를 강제하지 않는다.✅ 유연성- 개발자가 필요한 추가 기능(라우팅, 상태 관리, 데이터 페칭)을 선택적으로 다른 라이브러리를 통해 구현해야 한다. 즉, React는 UI를 만드는 데 초점을 맞춘 라이브러리이다.❓ Next.js가 프레임워크인 이유✅ 역할- Next.js는 React 기반으로 만들어진 프레임..
[Typescript] 원시 타입과 객체 타입
·
Typescript
1. 원시 타입- 메서드나 속성을 가지지 않는 불변(immutable) 데이터 타입1️⃣ number : 숫자 데이터2️⃣ string : 문자열 데이터3️⃣ boolean : true 또는 false4️⃣ bigint : 매우 큰 정수 데이터5️⃣ symbol : 고유하고 변경 불가능한 값 생성6️⃣ null : 명시적으로 값이 없음(빈 값)7️⃣ undefined : 값이 아직 할당되지 않음2. 객체 타입- 키-값 쌍으로 이루어진 복잡한 데이터 구조를 표현. 원시 타입을 제외한 모든 데이터1️⃣ object : 객체에 해당하는 모든 타입 값을 유동적으로 할당 가능 -> 가급적 사용x...any와 유사한 역할2️⃣ {} : 객체 리터럴 방식으로 객체를 생성할 때 사용3️⃣ array : 자바스크립트와 ..
[Typescript] enum이란 무엇인가?
·
Typescript
❓ 정의- enum은 열거형 타입의 줄임말로, 상수 값들의 집합을 정의하는 데 사용    -> 코드의 가독성을 높이고, 특정 값들만 허용되는 상황에서 오류를 줄일 수 있음!- 자바스크립트는 enum 타입을 직접적으로 제공하지 않지만, 타입스크립트에서는 enum 키워드를 통해 공식적으로 지원- 숫자와 문자열 모두 사용가능하며, 숫자 열거형은 첫 번째 값부터 자동으로 증가▶ 기본 사용 예시// 숫자 enumenum CardinalDirections { North, East, South, West}console.log(CardinalDirections.North); // 0console.log(CardinalDirections.West); // 3// 문자열 enumenum CardinalDirecti..
우아한 타입스크립트 with 리액트
·
독서
🔸 웹사이트와 웹 애플리케이션- 웹사이트는 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹이지만,- 웹 애플리케이션은 사용자와 상호작용하는 쌍방향 소통의 웹이다. (댓글, 검색, 채팅, 좋아요 등...)🔸 자바스크립트의 한계- 자바스크립트 특징 중 하나는 동적 타입 언어. 따라서 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다.- 숫자 a, b의 합을 반환하는 sumNumber라는 함수를 만들었을 때, 자바스크립트에서는 a, b에 문자열을 입력해도 오류가 나지 않고 'ab'라는 반환값을 준다. -> 개발자의 의도와는 다르게 동작할 수 있음!🔸 컴파일타임과 런타임- 컴파일타임: 기계가 소스코드를 이해할 수 있도록 기계어로 변환되는 시점- 런타임: 컴파일타임 이후 변환된..