4장 - 이벤트 핸들링 리액트의 이벤트 시스템 - React Typescript Versionsrc/ 안에 들어가는 모든 .ts 파일은 맨 위에 import React from 'react'가 들어갑니다!코드 내부의 (...)안에 들어간다고 생각하시면 됩니다.일단, 기본적인 틀은 Say.tsx 로부터 시작합니다!먼저, 작성했던 Say.tsx 파일부터 보겠습니다.Say.tsx// (...)import { useState } from 'react'const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('Hello!'); const onClickLeave = () ..
React
함수 컴포넌트에서 useState 사용하기사실상 제일 많이 사용하게 됩니다.Hook 이라는 요소에 속합니다.useState 사용하기Say.tsx// (...)import {useState} from 'react'const Say = () : JSX.Element => { const [message, setMessage] = useState(''); const onClickEnter = () : void => setMessage('Hello'); const onClickLeave = () : void => setMessage('Good Bye!'); return ( 입장 퇴장 )}export default Say..
state - Typescript컴포넌트 내부에서 바꿀 수 있는 값props는 상위 컴포넌트에 의지, state는 내부에서 직접 변경이 가능합니다.솔직히 클래스형 컴포넌트는 굉장히 까다롭습니다.나중엔 대부분 함수형 컴포넌트만 쓰게 됩니다.그래도 코드 참고 할 때, 읽을 줄 알아야 해서 이해는 필수입니다!! 클래스형 컴포넌트의 statesrc/ 디렉토리에 여전히 작성하시면 됩니다.Counter.tsx// (...)import { Component } from 'react';interface StateFace{ number : number;}class Counter extends Component { constructor(props : {}){ super(props); /..
비구조화 할당 문법을 통해 props 내부 값 추출하기 - Typescript앞선 문법에서는 props를 그대로 사용했습니다.이번에는 함수 내부에서 변수에 할당 하여 사용 할 것 입니다.먼저 알아야 할 것!props 로 오는 값은 Object의 형태를 띄고 있습니다.Example// App.tsx에서 name, children 값을 보내 왔다고 가정하겠습니다.props = { name : 'Gong', children : 'React'}// name : string, children : string 인 것을 알 수 있습니다.// 따라서,interface PropFace{ name : string; children : string;}// props로 오는 name 그리고 childre..
클래스형 컴포넌트앞에서 보았던 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 설치하기코드 에디터 - ..
