🌳Frontend74 React에서 state를 정의할 때 고려해야 할 점 (feat. SSOT) 해당 게시글은 우아한 타입스크립트 with 리액트 10장을 읽고 정리한 글 입니다. React에서 State 란? - 시간이 지나면서 변할 수 있는 동적인 데이터 - 렌더링에 영향을 줄 수 있는 동적인 데이터 리액트 앱 내에서의 상태는 지역 상태, 전역 상태, 서버 상태 로 분류할 수 있습니다. 리액트 API만 으로도 상태를 관리할 수 있지만, 성능 문제가 발생하거나 규모가 커져 복잡해지면 Redux, MobX, Recoil 과 같은 외부 상태 라이브러리를 주로 활용합니다. 특히나, 컴포넌트 간의 상하관계 사이에서 상태 전달을 위해 과도한 Props drilling 을 막고자 사용합니다. React 에서 State 를 정의할 때 고려해야 할 사항 리액트에서 state가 변하게 되면(업데이트가 되면) 리렌.. 2024. 2. 25. React 컴포넌트 타입인 ReactElement vs JSX.Element vs ReactNode 차이와 예시 컴포넌트의 props에 컴포넌트를 넘겨야 할 때, props의 이름과 컴포넌트의 타입을 선언해주어야 한다. import { JSX, ReactElement, ReactNode, useEffect, useState } from 'react' interface Props { component: ReactElement component1: JSX.Element component2: ReactNode } 하지만 이 컴포넌트의 타입은 `ReactElement` , `Element` , `ReactNode` 세가지가 있으며, 세가지 모두 리액트의 요소를 나타낸다. 이 타입들의 차이는 무엇이 있을 지 알아보자. ReactElement 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX문법을 crea.. 2024. 2. 24. 타입도 분기처리 할 수 있나요? 타입스크립트에서 조건부 타입 알아보기 타입스크립트에서는 조건에 따라 다른 로직을 실행할 수 있다. Condition ? true : false 삼항연산자를 활용한 조건부 로직 그렇다면, 타입도 조건에 따라 다르게 할당할 수 있을까? 예를들면, Condition이 true면 AType, false면 BType 처럼 말이다. 조건부 타입이 필요한 상황 타입에도 조건부 를 부여할 수 있다. 즉 , 조건부 타입이 가능하다. 현업에서 조건부 타입이 필요했던 상황과 활용방법에 대해 알아보자. 요구사항 요구사항은 버스와 지하철, 사무기관의 정보를 보여주는 화면을 개발하는 것이였다. 서버에서 내려주는 spec은 아래와 같았다. type Bus = { name: string lat: number lng: number } type Subway = { name.. 2024. 2. 16. 프론트엔드 테스트 - 올바른 테스트 작성을 위한 규칙 이 게시글은 실무에 바로 적용하는 프런트엔드 테스트 강의를 듣고 정리한 게시글 입니다. 더 자세한 내용과 예시는 강의 참고를 추천드립니다. 올바른 테스트 코드를 작성하려면 어떤 규칙이 있을까요? 1. 테스트코드는 인터페이스 기준으로 작성합니다. React 컴포넌트를 컴포넌트한다고 했을 때, 컴포넌트 내부의 state를 강제로 직접 변경해서 테스트하는 것이 아닌, 컴포넌트와 통신할 수 있는 외부의 인터페이스를 통해 테스트를 해야 합니다. 위의 코드는 `SpecificComponent` 의 `isShowModal` state를 강제로 수정하여 테스트하고 있어요. 이럴때 생기는 문제점은 뭐가 있을까요? 1. 변경되는 상태가 많은 경우, 테스트코드 상에서 하나하나 직접 변경해주어야 합니다. 2. 어떤 상황에서 .. 2024. 1. 18. 이전 1 2 3 4 ··· 19 다음 728x90 반응형
