React에서 Form 태그를 사용하는 경우가 있다. 일반적으로 input, textarea 등 value를 통해 무언가 작업을 한다. 이때, useState를 사용하면 값이 변경될 때 마다 컴포넌트가 리렌더링이 발생하게 된다. 실제 값이 변경됨을 감지해서 무언가 작업을 해야한다면 사용할 수 있지만 그게 아니라면 굳이 필요없는 리렌더링이 발생하게 된다. 이것을 useRef도 아닌 Form 태그 자체 기능을 사용해서 해결할 수 있다. const Component = () => { const handleSubmit = (e: React.FormEvent) => { event.preventDefault(); const target = event.target as HTMLFormElement; const tit..

써야지 생각만 계속 하다가 이번에 작성하게 되었다. Eslint ? 자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 좋은 친구이다. Prettier ? 코드의 스타일만 정리해준다. 미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다. 설치 VScode의 extensions에서 eslint와 prettier를 설치해준다. npm install --save-dev eslint prettier typescript 설정을 위해서 eslint와 prettier를 설치하고, 타입스크립트 환경이므로 typescript도 설치해준다. ..

이번에는 타입스크립트와 Express를 함께 세팅하는 방법을 정리하고자 한다. Express 프로젝트 생성 npm install -g express-generator 직접 Express를 구성해도 상관없지만, express-generator를 사용하면 간단하게 환경 구성이 가능하기 때문에 사용한다! 패키지 설치 npm install --save-dev nodemon 코드를 작성하면 바로바로 변경사항을 적용하기 위해서 nodemon을 사용한다. npm install --save-dev @types/node @types/express @types/morgan @types/debug @types/cookie-parser @types/http-errors ts-node typescript @types/node ..

Webpack과 Babel을 사용해서 React 환경을 구성하는 작업은 많이 했었다. 하지만 이번에 타입스크립트를 같이 적용하면서 Webpack 5버전의 기능도 사용하면서 다시 환경을 구성해보려고 한다. 기본 세팅 npm i --s core-js react react-dom 바벨 설정을 위한 core-js, 리액트 사용을 위한 react, react-dom 이다. npm i --save-dev @babel-cli @babel/core @babel/plugin-syntax-dynamic-import @babel/preset-env @babel/preset-react @babel/preset-typescript 엉청 많다. ㅋㅋ... 우선 마찬가지로 바벨 설정을 위한 패키지들이다. babel/plugin-s..

들어가며 이 글은 Webpack을 사용해서 JavaScript를 기본적으로 구성한 이후라고 판단하여 작성합니다. 필요 패키지 다운로드 npm install --save-dev typescript @babel/preset-typescript 필요한 패키지는 타입스크립트를 사용하기 위한 typescript와 babel에서 읽기 위한 @babel/preset-typescript이다. 초기 설정 먼저 프로젝트에서 사용할 tsconfig를 추가한다. ./node_modules/typescript/bin/tsc --init 몇가지 옵션을 적어보자면, target 옵션 : 타입스크립트 파일을 어떤 버전의 자바스크립트로 변경할지 지정 es5로 세팅하면 es5 버전의 자바스크립트로 컴파일해준다. module 옵션 : 자..

object 자료에 타입을 미리 만들어주고 싶은데, 어떤 속성들이 들어올 수 있는지 모르거나, 타입 지정할 속성이 너무 많은 경우에는 index signatures를 사용하면 편하게 가능하다. index signatures interface stringOnly { [key :string] :string } let obj :stringOnly = { name :'kim', age :'20', location :'seoul' } StringOnly라는 interface를 만들었다. 특이한 점으로 속성으로 [ key :string] : string 이라고 정의가 되어있다. 이렇게 정의하면 " 모든 string으로 들어오는 key값에 할당되는 value는 string이어야 한다. " 라는 타입이 된다. 즉, {..

0. Props & State ? React Native는 React에서 파생되었기 때문에 대부분의 개념이 React와 동일하다. Props와 State 역시 리액트의 핵심 개념이다. Props 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 전달받은 데이터는 자식 컴포넌트에서 변경이 불가능하다. State 컴포넌트 안에서 유동적으로 데이터를 다룰 때 사용하며, 컴포넌트 안에서 데이터를 변경할 수 있다. 즉, State는 컴포넌트의 상태를 나타낸다. 1. 프로젝트 준비 react-native init Counter --template react-native-template-typescript React Native CLI를 사용해서 타입스크립트용 프로젝트를 생성하였다. npm install --..

0. 들어가며 들어가기에 앞서 개발환경 구성은 앞선 React Native 개발환경 구성 부분을 확인하시길 바랍니다. 1. 프로젝트 생성 React Native CLI를 사용해서 React Native 프로젝트를 생성한다. react-native init FirstApp 명령어를 사용하면 자동으로 최신 리액트 네이티브 버전으로 프로젝트가 생성된다. 하지만, 이번 버전을 사용하거나, 특정 프로젝트와 동일한 버전으로 프로젝트를 생성하고 싶은 경우에는 react-native init -version 0.59.10 FirstApp -version 옵션을 사용하면 지정할 수 있다. 프로젝트 구성이 다 된 경우에 IOS의 경우 yarn ios // or react-native run-ios 명령어를 통해서 프로젝트..