Web_Study (28) 썸네일형 리스트형 ReactJS_2:JSX_Syntax JSX Basic Syntax ● JSX는 html에서 사용하는 class 대신 className사용 hi ● 변수 외부 선언 후, JSX내부에서 {변수명}으로 불러오면 사용가능 let val='valueA'; return ( {val} ) ● return 안에는 2개의 div 병렬적으로 표현 X But, 의미없는 div태그를 줄이고 싶다면 로 묶어서 표현 가능 return( ) ● state 사용 import {useState} from 'react'; ● valA: state, setValA: state변경함수, useState('state의 초기값') let [valA,setValA] = useState('초기값'); ● State를 사용하는 이유 일반 변수는 html에 자동으로 변경 X -> 새로.. ReactJS_1:Install ▶ 개발환경 세팅 ▶ node.js 설치 npx creat-react-app my-app React작업할 파일내에서 터미널 사용 ▶ 기본파일들 라이브러리 모아놓는곳 static 파일 모아놓는곳(html, image파일 잠간 넣어둘때...) 코드 작업하는 곳 프로젝트정보(프로젝트명, version, 라이브러리 명들) src - index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document... TypeScript_2:Types ▶ TypeScript는 변수를 생성할때 Type을 지정이 필수는 아님 let a : number = 3 let b = 3 // type을 지정하지 않아도 typescript가 추론해서 type을 number로 지정 ▶ Basic Types let a : number =1 let b : string = "Hi" let c : boolean = true led d : number[] = [1,2,3] // 숫자형 배열 Syntax 변수명 : type = value ▶ Optional Type const player = { name:string, age?:number// ?붙임으로써 age는 optional ( 있어도 Okay, 없어도 Okay ) }={ name="yjh" } TypeScript는 age가.. TypeScript_1 : Why use TypeScript? ▶ TypeScript 사용이유 : JavaScript의 안전성 Issue ▶ JavaScript는 바보같은 코드를 작성해도 Error❌ [1,2,3,4] + false // return 값 : '1,2,3,4false' ▶ RuntimeError발생! function func1(num1,num2){ return num1/b } func1(XXXX) // return 값 : NaN JavaScript는 에러가 날거라는 것을 인지하지 않고 그냥 코드를 실행시킴 TypeScript는 이와 같은 에러들을 사전에 방지 이전 1 2 3 4 다음
