Redux를 사용하는 이유 1. state를 한 저장소에서 관리하기 위해 => props 필요 없이 state를 사용가능 2. 수정방법을 reducer 함수로 정의함으로써 => state 수정 시 발생하는 버그를 줄일 수 있다. npm install redux react-redux 1. 우선 redux를 설치하기 위해 명령어를 터미널에 입력한다. npm install @reduxjs/toolkit 2. 신규방식의 Redux 공식 toolkit 라이브러리를 사용하려면 명령어 하나를 더 입력해야 한다. => 전통방식을 사용한다면 굳이 설치할 필요 없다. Redux - state 생성하는 법 import React from 'react'; import ReactDOM from 'react-dom'; impor..
JSX 타입지정 let 박스 :JSX.Element = let 버튼 :JSX.Element = 리액트는 변수나 자료에 를 담아서 사용할 수 있다. => 는 일반적인 HTML이 아닌 JSX문법이기 때문. 이때 타입지정을 추가로 하고 싶다면 변수명 : JSX.Element 타입을 사용할 것. function 컴포넌트 타입지정 function App(){ return ( ); } function Profile(props:{name:string, age:string}) :JSX.Element{ return( {props.name}입니다. ) } 1. 리액트 키워드인 props에 파라미터 타입지정을 할 수 있고, 2. 리턴 타입의 경우 :JSX.Element를 사용하면 된다. => 생략해도 자동으로 타입지정이 됨..
작업폴더 경로로 들어간다. 터미널을 오픈한다. 명령어를 입력한다. 개발중인 React 프로젝트에 설치하는 경우 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 새로운 React 프로젝트를 개발하는 경우 npx create-react-app my-app --template typescript my-app 부분은 개인적인 폴더명을 기입하면 된다. 일반 HTML, CSS, JS 웹 개발의 경우는 ts파일을 알아듣지 못하기 때문에 .ts 파일을 -> .js파일로 변환하는 작업이 필요한데, 리액트나 뷰 프로젝트 경우에는 이처럼 간단한 bash 명령어 하나로 해결할 수 있다.
