728x90 반응형 KDT59 [TIL] 10/31 클래스/함수형 컴포넌트, useState 1. 컴포넌트 원래 리액트에서는 클래스형 컴포넌트를 썼지만, 리액트 18버전 이후로 리액트 훅이란 것이 생기면서 함수형 컴포넌트에서 state 관리, 라이프사이클 등을 사용할 수 있게 되면서 더 간단하게 사용할 수 있는 함수형 컴포넌트를 사용하고 있다. 1.1. 클래스형 컴포넌트 Component 클래스를 상속해야 하기 때문에 Component 를 import 해와야한다. 클래스형 컴포넌트에서는 render() 메서드를 통해 화면을 그린다. import { Component } from "react";class ClassCom extends Component { render() { return ( 클래스형 컴포넌트 .. 2024. 10. 31. [TIL] 10/30 리액트 기초-1 1. 리액트 리액트는 자바스크립트 라이브러리사용자 인터페이스를 만들기 위해 페이스북에서 개발Single Page Application 1.1. 리액트 프로젝트 시작하기 리액트 프로젝트 생성npx create-react-app 프로젝트명 리액트 앱 실행npm start 만약 typescript 기반으로 리액트 프로젝트를 생성하려면 아래의 명령어를 사용해주면 된다.npx create-react-app 프로젝트명 --template typescript 아래의 코드는 index.tsx 파일의 코드이다. index.tsx 의 구조는 바꾸지 않고, App 컴포넌트를 가지고 있는 App.tsx 파일의 구조만 바꾸면 화면을 바꿀 수 있다.// index.tsx// ...const root = ReactDOM.cre.. 2024. 10. 30. [TIL] 10/29 타입스크립트 기초-2 1. 리터럴 타입 1.1. 리터럴 타입 리터럴 타입은 타입스크립트에서 고정된 특정 값 자체를 타입으로 사용하는 것을 의미한다. 일반적인 타입인 string, number, boolean 등은 여러 값의 집합을 나타내지만, 리터럴 타입은 특정 값을 지정해 해당 값만 가질 수 있도록 제한한다. 리터럴 타입은 특정 값만을 허용하기 때문에, 코드에서 고정된 값의 사용을 강제하거나 제한된 옵션을 줄 때 유용하게 쓸 수 있다. 예를 들어 const name = "Alice"; 라고 값을 지정하면 "Alice" 는 리터럴 값에 해당된다. 이때 "Alice" 를 타입으로 사용할 수도 있으며, 이를 리터럴 타입이라고 한다. - 문자열 리터럴 타입: 특정 문자열 값으로 제한되는 타입let direction: "left.. 2024. 10. 29. [TIL] 10/28 타입스크립트 기초-1 1. 타입스크립트 1.1. 타입스크립트 타입스크립트는 자바스크립트를 베이스로 하고 타입 기능까지 추가된 언어로,타입스크립트 환경에서 자바스크립트를 코딩하면 동작하지만 자바스크립트 기능에서 타입스크립트를 코딩하면 동작하지 않는다.그래서 자바스크립트를 실행할 수 있는 웹 브라우저에서 타입스크립트를 실행할 수 없기 때문에 타입스크립트로 작성된 코드는 자바스크립트로 컴파일을 한 후에 웹브라우저로 넘겨줘야 한다. 자바스크립트 기반보다 버그를 줄일 수 있음유지보수 쉬움강력한 높은 퀄리티의 코드를 생산할 수 있음 1.2. 타입스크립트 환경설정 - 타입스크립트 설치npm i -g typescript - tsconfig.json 파일 만들기 이렇게 tsconfig 파일을 만들면, 기본적으로 필요한 설정값들이 설정되어 있.. 2024. 10. 28. 이전 1 2 3 4 5 6 ··· 15 다음 728x90 반응형
