728x90 반응형 Today I Learned54 [TIL] 11/1 props, 모달창 만들기 1. props일반 함수의 매개변수와 비슷하다고 생각하면 된다. props 는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때 사용한다. (역방향, 자식 -> 부모로는 불가능) 1.1. 함수형 컴포넌트에서 props 사용하기 부모 컴포넌트에서 "맑음" 을 넘겨주면 자식 컴포넌트에서 받아서 사용할 수 있다. 타입스크립트는 타입이 존재하기 때문에 자바스크립트와는 다르게 props 의 타입을 지정해줘야 한다. // App.tsx -> 부모 컴포넌트function App() { return ( );}export default App;// MyWeather.tsx -> 자식 컴포넌트interface MyProps { weather: string; children: Re.. 2024. 11. 1. [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/28 타입스크립트 기초-1 1. 타입스크립트 1.1. 타입스크립트 타입스크립트는 자바스크립트를 베이스로 하고 타입 기능까지 추가된 언어로,타입스크립트 환경에서 자바스크립트를 코딩하면 동작하지만 자바스크립트 기능에서 타입스크립트를 코딩하면 동작하지 않는다.그래서 자바스크립트를 실행할 수 있는 웹 브라우저에서 타입스크립트를 실행할 수 없기 때문에 타입스크립트로 작성된 코드는 자바스크립트로 컴파일을 한 후에 웹브라우저로 넘겨줘야 한다. 자바스크립트 기반보다 버그를 줄일 수 있음유지보수 쉬움강력한 높은 퀄리티의 코드를 생산할 수 있음 1.2. 타입스크립트 환경설정 - 타입스크립트 설치npm i -g typescript - tsconfig.json 파일 만들기 이렇게 tsconfig 파일을 만들면, 기본적으로 필요한 설정값들이 설정되어 있.. 2024. 10. 28. 이전 1 2 3 4 5 6 7 ··· 14 다음 728x90 반응형
