![]()
클래스형 컴포넌트앞에서 보았던 App 컴포넌트는 함수형 컴포넌트입니다.다른 컴포넌트 선언 방식인 클래스형 컴포넌트를 작성 해 볼 겁니다. - Typescript//위에 항상 들어가야 합니다.//import React from 'react'// (...)import { Component } from 'react'class App extends Component { render() : JSX.Element { //const name = 'react' 도 상관없습니다. const name : string = 'react'; return { name } }}export default App; src 디렉토리에 MyComponent.tsx 파일을 생성해 보..
코드 이해하기먼저, src/ 내부의 모든 ts, tsx 파일은 맨 위에 디폴트로 import 해야하는 항목이 있습니다.import React from 'react';typescript 를 적용하기 위해서 필수로 입력해야 하는 문장입니다.먼저, yarn create react-app [생성한 프로젝트 이름] --template typescript로 생성한파일을 이해하기 위해 src/App.tsx 파일을 열어봅니다.import React from 'react';import logo from './logo.svg';import './App.css';function App() : JSX.Element { return ( Edit src/App.ts..
기초적인 Typescript 문법을 알아야 합니다1. 변수 선언 방법const typeString : string = "Hello World"const : 변하지 않는 고정 값이라는 의미입니다.typeString : 제가 임의로 정한 변수 이름입니다.string : Typescript에서는 모든 변수에 타입이 지정이 되어야 합니다.2. 함수의 반환값 선언 방법const App : () : JSX.Element => { return ( Hello World );};App : React 프로젝트를 작성 시, "컴포넌트" 를 모아서 처리하는 역할로 계속 쓰이게 됩니다.JSX.Element : "React.FC" 로 선언하는 방식이 있지만, JSX.El..
1장에 대한 요약1. React 서론컴퓨터의 성능이 매우 발전함에 따라 동적인 페이지 에 대한 필요도가 높아졌습니다.이에 FaceBook이 최대한 성능을 아끼고 동적인 웹을 보여줄 수 있는 "React" 라는 시스템을 개발했습니다.성능을 아끼는 방법은, 수많은 Component 에서 몇 개의 정보가 변경되었을 때, 모든 Component를 변경하는 것이 아니라, 변경 된 Component 만 변경하는 방식입니다.이 방식은 Virtual DOM을 사용하여 성능을 아낍니다.Virtual DOM : 변경된 Component를 가상의 환경에서 만든 후, 실제로 변경 된 DOM을 비교하여 반영하는 방식2. 작업 환경 설정 - 저는 "Mac"입니다.Node.js / npm, yarn 설치하기코드 에디터 - ..
