공부해봅시당

상태란?리액트 공식문서 : 렌더링 결과에 영향을 주는 정보를 담은 순수 자바스크립트 객체 시간이 지나면서 변할 수 있는 동적인 데이터이며, 값이 변경될 때마다 컴포넌트의 렌더링 결과물에 영향을 준다.크게 지역 상태, 전역 상태, 서버 상태로 구분 할 수 있다.상태의 종류지역 상태 : 컴포넌트 내부에서 사용되는 상태전역 상태 : 앱 전체에서 공유하는 상태서버 상태: 외부 서버에 저장해야 하는 상태상태 관리시 유의 사항상태는 애플리케이션의 복잡성을 증가시키고 동작을 예측하기 어렵게 만든다. 또한 상태가 업데이트될 때마다 리렌더링이 발생하기 때문에 유지 보수  및 성능 관점에서 상태의 개수를 최소화하는 것이 바람직한다.이를 위해서 2가지를 고려해야 한다.시간이 지나도 변하지 않느다면 상태가 아니다.파생된 값은..

기본 훅 리액트 훅이 추가되면서 함수형 컴포넌트가 주가 되기전에는, 클래스 컴포넌트를 사용하였다. 하지만 이럴 경우 생명주기 함수에서만 상태 업데이트에 따른 로직을 실행시킬 수 있었고, 프로젝트 규모가 커질수록 스토어에 상태를 연결하거나 비슷한 로직을 가진 상태 업데이트 및 사이드 이펙트 처리가 불편해졌다. 또한 모든 상태를 하나의 함수 내에서 처리하다 보니 관심사가 뒤섞이게 되었고, 상태에 따른 테스트나 잘못 발생한 사이드 이펙트의 디버깅이 어려워졌다. 이번 장에서는 자주 사용하는 훅의 타입과 사용에 대해서 설명해준다.리액트에서 hook을 import하고 vscode에서 ctrl+왼쪽클릭(윈도우)을 하면 타입을 확인할 수 있다.1. useStatefunction useState(initialState:..

들어가기 전1. Component컴포넌트는 리액트 애플리케이션의 가장 기본적인 빌딩 블록이다.각각의 컴포넌트는 독립적이고 재사용 가능한 UI 조각을 정의하며, HTML, CSS, JavaScript 코드가 결합된 하나의 UI 단위를 표현한다.클래스형 컴포넌트와 함수형 컴포넌트가 있다. (1) 클래스형 컴포넌트(Class Component)클래스 문법으로 정의된 컴포넌트이다.리액트 생명주기 메서드를 사용할 수 있으며, state를 통해 상태를 관리한다.class MyComponent extends React.Component { render() { return Hello, {this.props.name}!; }} (2) 함수형 컴포넌트(Functional Component)함수로 정의된 컴포넌트..

JSX(JavaScript XML)는 리액트에서 주로 사용되는 특별한 문법으로, JavaScript 코드 안에 HTML과 유사한 구조를 작성할 수 있게 해준다.JSX는 리액트 컴포넌트를 정의하고 UI를 표현할 때 주로 사용된다.그렇다고 JSX를 리액트에서만 사용할 수 있는 것은 아니다.처음에는 React와 함께 사용하기 위해 Facebook에서 만들었지만 JSX는 여러 웹 프레임워크에서 채택되었다. 특징- HTML과 유사한 문법JSX는 XML이나 HTML처럼 보이지만, 실제로는 JavaScript로 컴파일된다.이 때문에 HTML처럼 작성하면서도 JavaScript의 모든 기능을 사용할 수 있다.- JavaScript와의 결합JSX는 JavaScript 내에서 HTML 요소를 정의하는 방법이다.JSX 안에..

API요청1. fetch함수 대신 Axios를 도입하게 된 이유 내장함수인 fetch를 통해 기본적으로 구현했는데, 가장 안 좋은 모델은 특정 컴퍼넌트에서 일일이 API 요청을 복사해가면 하는 것이다. 같이 요청에 대해서도 똑같은 URI를 복붙해서 썼고 이는 백엔드 URI 변경 및 추가적인 요청 정책이 추가될 떄마다 번거러움이 발생했다. 이를 해결하려면 우선적으로 서비스 레이어로 분리할 필요가 있다.컴퍼넌트와 요청을 관리하는 fetch함수를 따로 분리하는 것이다. 하지만 직접 타임 아웃, 커스텀 헤더 추가 등등 다양한 정책을 구현하는 것은 번거롭기 때문에 Axios라이브러리를 사용한다. 2. Axios 활용1) 일반적인 활용const defaultConfig = { baseURL: 'https://ap..

고수준 언어 : 사람이 이해하기 쉬운 언어저수준 언어:  컴퓨터가 이해하기 쉬운 언어 자바스크립트는 대표적인 고수준언어로 컴파일러에 의해 기계어 코드로 변환되어 실행이 가능한 프로그램이 된다. 컴파일타임 :  소스코드가 컴파일 과정을 거쳐 컴퓨터가 인식할 수 있는 기계어로 변환되는 과정런타임 : 소스코드가 컴파일이 완료되면 프로그램이 메모리에 적재되어 실행되는 과정 타입스크립트의 컴파일타입스크립트는 컴파일 시 또 다른 수준의 고수준 언어인 자바스크립트로 바뀐다. 이를 트랜스파일이라고 하는데, 이를 바탕으로 컴파일을 크게 2가지로도 구분한다. 좁은 의미의 컴파일: 고수준 언어를 저수준 언어로 바꾸는 과정트랜스파일 : 고수준언어를 또 다른 고수준 언어로 변환하는 과정(소스 대 소스 컴파일러)         ..

extends와 제네릭을 활용한 조건부 타입조건부 타입에서 extends를 사용할 때는 자바스크립트 삼항 연산자와 함께 쓴다.// T를 U에 할당할 수 있으면 X타입, 아니면 Y타입T extends U ? X : Ytype IsString = T extends string ? "yes" : "no";type Test1 = IsString; // "yes"type Test2 = IsString; // "no" 이해를 돕기 위해 간단한 예제를 살펴보자. 제네릭과 extends를 사용한 필터링제네릭과 조건부 타입을 사용하여 특정 타입을 필터링할 수 있다.type Filter = T extends U ? T : never;type Test3 = Filter; // stringtype Test4 = Filt..

타입 확장하기앞으로 등장할 집합의 개념은 `속성의 집합`이 아니라 `값의 집합`임 유니온 타입MyUnion은 A와 B의 합집합이다.A의 값을 가질 수도 있고, B의 값을 가질 수도 있다.대신 A와 B의 값을 합쳐서 가질 수는 없다.type A = { type: 'A'; propertyA: string;};type B = { type: 'B'; propertyB: number;};type MyUnion = A | B;const value1: MyUnion = { type: 'A', propertyA: 'Hello'};const value2: MyUnion = { type: 'A', propertyA: 'World'};const value3: MyUnion = { ..