JSX vs 순수 자바스크립트 함수1. JSX(JavaScript XML) 방식 function App() { return ( Hello, 리액트!! );}개발자가 화면 구조를 한눈에 파악하기 매우 쉽습니다.브라우저는 원래 이 코드를 이해하지 못합니다. 그래서 실행 직전에 바벨(Babel) 같은 도구가 아래의 코드로 번역해 줍니다.2. React.createElement 방식 function App() { return React.createElement("div", null, "Hello, 리액트!!", React.createElement("p", null));}순수 자바스크립트 함수 호출 형태입니다.가상 DOM 객체를 만드는 실제 모습입니다. 📝 JSX 핵심 문법 정리1...
🤔 React 란?자바스크립트 라이브러리의 하나, 웹 프레임워크사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 기능2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램닷컴에 적용.2013년 발표, 오픈소스화 됨 Component (컴포넌트): UI를 이루는 최소 단위입니다. 마치 레고 블록처럼 화면의 각 부분을 독립된 부품으로 만들고, 이를 조립해 큰 웹사이트를 완성합니다.Virtual DOM (가상 DOM): 성능의 비결입니다. 화면에 변화가 생길 때마다 전체 페이지를 다시 그리는 대신, 가상의 복사본에서 바뀐 부분만 계산해 실제 화면에 반영합니다. 매우 빠르고 효율적이죠.Declarative (선언적 프로그래밍): "어떻..
구조체, 공용체, 열거형, 인터페이스, 클래스 클래스연관된 변수와 함수들을 한 덩어리로 묶음 클래스와 객체 클래스(설계도, 생산틀)는 객체의 뼈대, 객체는 클래스의 실체 //일반적인 직원 정보let empName : string;let age : number;let empJob : string;function printEmp(empName : string, age : number, empJob : string) : void{ console.log(`${empName}의 나이는 ${age}이고, 직업은 ${empJob}입니다.`);}printEmp('kim', 20, 'developer');이 코드에서는, empName, age, empJob이 각각 별개의 변수입니다. 만약 직원이 100명..
1. 배열 (Array)배열은 동일한 타입의 데이터를 순서대로 나열한 것입니다.기본 선언: 타입[] 또는 Array 형식을 사용합니다.유니온 타입 배열: 여러 종류의 타입을 하나의 배열에 담고 싶을 때 (number | string)[] 처럼 소괄호로 묶어 선언합니다.읽기 전용 배열 (ReadonlyArray): 배열의 요소를 변경하거나 추가할 수 없도록 잠그는 기능을 제공합니다. let numbers : number[] = [1,2,3,4,5];let fruits : string[] = ['apple', 'banana', 'orange'];// 배열의 유니온 타입: 숫자와 문자열이 섞여도 OKlet mixedArray : (number | string)[] = [1, 'two', 3, 'four'];/..
any 타입타입 스크립트는 타입에 관한 정보가 더 많을수록 더 좋습니다.타입 정보는 개발자의 의도를 명확하게 전달할 수 있습니다.효과적인 코드의 유지보수가 가능합니다.any타입을 일부러 사용하지는 말자! - 타입스크립트가 제공하는 타입 검사가 없어지니, 자바스크립트를 쓰는 것과 다를 바 없게 됩니다.타입을 지정할 수 없는 제한적인 경우에만 사용유니온 타입제한된 타입을 동시에 지정하고 싶을 때가 있습니다.| 파이프라인 기호를 사이에 두고 동시에 타입을 지정할 수 있습니다.let anyVal = number | string;anyVal은 number나 string 타입 중 아무 타입의 값이 올 수 있습니다.type strOrNum = number | string;let numStr : strOrNum = '..
서론 gender 속성을 가져올때, 'male' / 'female' 만의 경우의수가 있다고 해보겠습니다. 이때 type을 단순히 string으로만 해두면 아예 의도하지않은 값이 들어올 수 있습니다. 이때에 '열거형'이라는 개념을 사용해줄 수 있겠습니다. 열거형(ENUM)제한된 선택지: GenderType.Male 또는 GenderType.Female만 허용하므로 데이터의 무결성이 지켜집니다.코드 가독성: 숫자로 관리하는 것보다 GenderType.Male이라고 쓰는 것이 코드를 읽는 사람에게 훨씬 친절합니다.//열거형 : 사용자 정의 타입enum GenderType { Male, Female}interface Student{ stdId : number; stdName? : stri..
