TypeScript는 JavaScript의 상위 집합으로 JavaScript에서 제공하는 대부분을 지원한다. ES5 모든 문법, ES6의 문법의 대부분을 사용 가능하다. 1. Props /* props 타입 정의 */ interface DummyProps { text: string; // 값 명시 text: "Hi"|"Hello"|"By" } /* 오브젝트의 타입이 DummyProps */ const Dummy = ({text}:DummyProps) => { return {text} } function App() { return ; } interface를 통해 props 타입을 정의해 준다. Dummy컴포넌트의 오브젝트에 타입을 지정한다. 값을 명시하게 되면 이외 문자 사용 x 2. Optional(선택..

1. 새로운 프로젝트 생성 방법. npx create-react-app 파일명 --template typescript 확장자 ts : 순수 TypeScript 파일이다. (JavaScript의 .js) 확장자 tsx : TypeScirpt에 React문법을 담은 확장자 파일이다. (JavaScript의 .jsx) 2. 기존 ReactJS파일을 TypeScript로 변환 방법. npm install --save typescript @types/node @types/react @types/react-dom @types/jest @types/이 package이름에 앞에 붙음으로써 nodeJS, react, jest 각각에 typescript의 문법을 적용 이후, js확장자를 tsx확장자로 변경 3. 라이브러리..

TypeScirpt는 Javascript의 확장판으로 Strongly-Type언어이다. Strongly-Typed란? 프로그래밍 언어가 작동하기 전에 Type을 확인 한다는 말이다. TypeScript - 컴파일 에러 (코딩할 때 알 수 있음) JavaScript - 런타임 에러 1. JavaScript와 TypeScript /*** JavaScript ***/ const plus = (a, b) => a + b; plus(2,2) // 4 plus(4, "h2") // 2h2 - a + b의 결과만 내보낸다. /*** TypeScript ***/ const plus = (a:number, b:number) => a + b; plus(2,2) // 4 plus(4, "h2") // 오류 발생 - para..

css 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 한다. css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어주는 장점이 있다. css를 적용하기 위한 3가지 방법 - 태그에 직접 속성 style={} - 적용 속성 모듈화 파일 생성 (Button.module.css) - Style Component 1. 라이브러리 설치 npm i styled-components /* TypeScript의 경우 추가 */ npm i @types/styled-components 2. 사용방법 import styled from "styled-com..

리액트는 SPA(single page Application) 방식으로써, 여러 개의 페이지를 사용하며, 새로운 페이지를 로드하는 기존의 MPA방식과 달리, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 1. 라이브러리 설치 npm install react-router-dom /* TypeScript의 경우 해당 패기지도 추가 설치 */ npm install --save @types/react-router-dom 2. Rounter 방법 두 가지 Browser Router - 도메인/ - 동적인 페이지에 적합 - 검색 엔진 사용 가능 - Github page 배포가 복잡 Hash Router - 도메인/#/ - 정적인 페이지에 적합 - 검색 엔진 사용 불가능 (#값 때문에) - Github..

컴포넌트는 state가 변경될 때 마다 계속 실행된다. useEffect는 한번만 실행이 필요한 코드를 사용하여 첫 렌더링 시점에만 실행되도록 만들어준다. useEffect가 필요한 경우 API를 통해 데이터를 가져올 경우 첫 번째 컴포넌트에서 렌더링할 때 API를 call하고, 이후에 state가 변환할 때, 그 API값을 또 다시 가져오지 않게 하기 위해 사용 1. useEffect는 두개의 파라미터를 가진다. 첫 번째 param : 콜 백함수 (실행하고 싶은 함수 ) 두 번째 param : dependency , 원하는 state가 변경될 때 실행되게 만든다. “[]”로 주게되면 최초 렌더링 시점에만 실행되게 된다. dependency란? react.js가 지켜보아야 하는 것들을 말한다. 2. 사용..

1. node.js 설치 https://nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org - 위 사이트에서 윈도우, 맥 상황에 맞게 설치한다. C:\Users\kang>node -v v14.15.5 C:\Users\kang>npm -v 6.14.11 - 정상 설치되었다면 version 확인, node js를 다운받으면 npm이 자동 설치된다. 2. npx 설치 C:\Users\kang>npm install npx -g C:\Users\kang\AppData\Roaming\npm\npx -> C:\Users\kang\AppData\..

Props는 일종의 방식으로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 1. 기본 사용 props 사용 방법 function Btn({text,big }) { return ( {text} } function App(){ return ( ); } export default App; props는 첫 번째이자 유일한 인자입니다. 인자로 obejct로 넘어온다. ex) {text:"Save Change", big:false} props는 object이기 때문에 “{}”중괄호를 열어 원하는 값만 뽑아올 수 있다. function Btn(props) => function Btn({text,big }) (ES6 문법) 2. 이벤트 리스너 사용 방법 (전체 코드) function Bt..

웹사이트를 만들다 보면 js, css, img 등 수많은 파일들이 생겨납니다. 완성된 웹사이트를 로딩해보면, 많은 파일들이 다운로드 되는걸 알 수 있습니다. 서버와의 접속이 많을 수록 어플리케이션은 느리게 로딩되기 때문에 이를 해결하고자 webpack이 나왔습니다. (웹팩이 무엇인지 보여주는 그림) (수많은 파일들이 로딩되는 어플리케이션) 1. webpack 라이브러리 설치 npm install -D webpack webpack-cli 옵션 -D : 개발을 위한 기능 들은 해당 옵션을 사용 webpack , webpack-cli : 두개의 패키지 설치 2. 사용 방법 2-1) 각각의 컴퍼넌트를 import 받는다. - hello.js var word = 'HELLO' export default word;..

Redux는 상태 관리 라이브러리로 state(변수)를 효율적으로 관리하기 위한 라이브러리 입니다. state를 내부 컴퍼넌트에서 사용하기 위해서는 props문법을 사용해야 합니다 하지만, 많은 컴퍼넌트 중첩이 발생할경우 그에 따른 props가 필요하기 때문에 Redux라는 라이브러리르 사용하면 편하게 사용 가능합니다 . Redux의 장점 장점 1. props를 사용하지 않아도 된다! (기존 props를 통한 state 전달 ) Redux를 설치하게되면 state를 보관하는 파일을 하나 만들수 있습니다. 여기에 모든 state를 보관합니다. (Redux를 통한 state 전달) 사용 방법 1-1) state 보관 파일 (store.js) 생성 import { Provider } from 'react-re..