✏️ useRef Reference useRef(초기값) 컴포넌트의 최상위 레벨에서 useRef를 호출해 ref를 선언한다. 초기값에는 어떤 유형의 값이든 지정할 수 있으며 초기 렌더링 이후 무시된다. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... useRef는 단일 프로퍼티를 가진 객체를 반환한다. 처음에는 전달한 초기값으로 설정되며 나중에 다른 값으로 바꿀 수 있다. ref 객체의 JSX 노드의 ref 속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 아래의 렌더링 사례에서 useRef는 동일한 객체를 ..
✏️ Describing the UI : Importing and Exporting Components The root component file CRA에서는 앱 전체가 src/App.js에서 실행된다. 설정에 따라 루트 컴포넌트가 다른 파일에 위치할 수도 있고, Next.js처럼 파일 기반으로 라우팅하는 프레임워크의 경우 페이지별로 루트 컴포넌트가 다를 수 있다. 리액트에서 루트 컴포넌트는 애플리케이션 내의 최상위 엘리먼트를 의미한다. 일반적으로 리액트 앱에 진입점 역할을 하는 public/index.html 파일 내의 DOM 노드로 표시된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // ..
✏️ Describing the UI : Your First Components Components: UI building blocks 컴포넌트는 리액트의 핵심 개념 중 하나로 UI를 구축하는 기반이다. 웹에서는 HTML 태그로 풍부한 구조의 문서를 만들 수 있다. 리액트를 사용하면 마크업, CSS, JS를 컴포넌트로 결합해 재사용할 수 있다. 이 때 컴포넌트란 앱에서 재사용 할 수 있는 UI 요소라고 이해하면 된다. 리액트 앱에서 모든 UI는 컴포넌트로 구성된다. 컴포넌트를 재사용하는 것은 여러 가지 이점이 있지만, 가장 대표적으로 빠르게 다양한 화면을 개발할 수 있다는 점이다. n개의 동일한 UI를 만드는 것과 컴포넌트를 사용해 동일한 UI를 n번 사용하는 것을 상상하면 당연히 후자가 빠를 것이다. ..
스토리북 일단 공식 문서에서 확인해보자. (링크) 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경이다. 말이 너무 어렵다. 프론트 단에서 컴포넌트 단위를 개발, 테스트, 문서화 할 수 있는 도구라고 생각하면 된다. 각각의 컴포넌트를 독립된 스토리로 분리해서 개발한다. props를 내려줘 바로바로 디자인이 변경되는 것을 확인, 테스트, 디버깅을 할 수 있다. 문서화 할 수 있어서 재사용성이 높고 개발자나 디자이너 등 팀의 협업을 용이하게 한다. 이전에 만든 바닐라로 MBTI 테스트를 React로 만들고, TS로 마이그레이션도 해보려고 하는데 혼자 컴포넌트도 문서화 해보면 좋겠다는 생각이 들어서 스토리북을 시작해봤다. 설치 필자는 제목처럼 타입 스크립트가 아닌 React, yarn, vite로..
로컬 저장소에 원격 브랜치 가져오기 상황 곰곰 프로젝트 중 백엔드 분의 작업물을 내 로컬에서 돌리고 있다. 새로운 feature를 기획하면서 feature/sort-answer라는 브랜치를 새로 만드셨다. 내 로컬에서 테스트 하기 위해서는 feature/sort-answer 브랜치를 당겨와 실행해야 하는데 내가 클론한 백엔드 분의 작업물에는 main, dev 브랜치 밖에 없다. 이 때 원격에 있는 브랜치를 내 로컬 저장소로 가져오려면 어떻게 해야 할까? 해결 1. git remote update로 원격 저장소에 있는 브랜치들을 로컬 저장소로 업데이트 한다. 2. git branch -r로 원격 브랜치, git branch -a로 모든 브랜치를 확인할 수 있다. 로컬 저장소를 업데이트 했다면 이제 가져와야..
타입스크립트 템플릿 적용하기 타입스크립트 템플릿으로 만들어진 CRA가 설치된다. npx create-react-app my-app --template typescript yarn create react-app my-app --template typescript tsconfig.json 뜯어보기 - target: 어떤 버전의 JS 코드로 컴파일할지 지정 - lib: 컴파일에 필요한 JS 내장 라이브러리를 지정한다. - allowJs: JS 파일 컴파일 허용 - skipLibCheck: 타입 체킹 스킵 (컴파일 시간을 줄여줌) - esModuleInterop: export default가 없어도 불러올 수 있음 - allowSyntheticDefaultImports: 상동 - strict: 엄격한 타입 검사..
타입 스크립트에서 외부 라이브러리 사용하기 JS를 사용할 때는 npmjs.com에서 바로 Installation 명령어에 따라 설치하기만 하면 됐지만 TS에서는 그렇게 할 수 없다. 코드 실행 전 타입 검사 기능을 시행하는데, 라이브러리 코드의 타입 검사도 수행한다. 따라서 라이브러리 코드의 타입 정보가 제공되지 않은 상황에서 타입 검사가 이뤄지지 않기에 오류가 발생한다. 단, 몇몇 라이브러리에서는 TS 아이콘(TS로 만들어짐)이 있는 것들은 원래 쓰던대로 바로 사용할 수 있다. DT 아이콘이 있는 경우 해당 아이콘을 누르면... 라이브러리 코드의 타입 정보를 갖고 있는 패키지를 추가로 설치해주면 된다. 이런 패키지를 Definitely Types라고 한다. **출처: 한 입 크기로 잘라먹는 타입스크립트..
타입스크립트 리액트 시작하기 npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest (타입스크립트 적용을 위해 타입 선언 패키지 추가) tsconfig.json 작성 target: TS 파일을 어떤 버전의 JS로 바꿔줄지 정하는 부분 module: JS 파일간 import 문법 구현 시 어떤 문법을 쓸지 정하는 부분 CommonJS는 require, ESM은 import 문법을 사용함 광범위한 호환성을 원할 때에는 ES5 & CommonJS로 설정 { "compilerOptions": { "target": "ES5", "module": "CommonJS", // react가 어디서든 잘 작동되게 ES5 & Com..
유틸리티 타입 제네릭, 맵드 타입, 조건부 타입 등 타입 조작 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은 것 여러 가지 유틸리티 타입이 있다. (참고 링크) 맵드 타입 기반의 유틸리티 타입 1 : Partial, Required, Readonly Partial 특정 객체 타입의 모든 프로퍼티를 '선택적 프로퍼티'로 바꿔주는 타입 맵드 타입과 인덱스드 엑세스(참고 링크)를 활용해 구현할 수 있다. interface Post { title: string; tags: string[]; content: string; thumbnailURL?: string; } // const draft: Post = { // title: '제목1', // content: '초안', // }; const dr..
조건부 타입 삼항연산자를 이용해 조건에 따라 타입을 결정한다. type A = number extends string ? string : number; // type A = number type ObjA = { a: number; }; type ObjB = { a: number; b: number; }; type B = ObjB extends ObjA ? number : string; // true (ObjA = 슈퍼) 제네릭과 조건부 타입 function removeSpaces(text: string | undefined | null) { if (typeof text === 'string') { return text.replaceAll(' ', ''); } else { return undefined; ..
