이다닷

TypeScript에서 함수의 데이터 타입 방법 1 : 매개변수와 반환 값의 데이터 타입 지정 function add(a: number, b: number): number { return a + b; } 함수 add를 생성할 때, number 타입인 a, b를 받고, a + b의 값을 반환한다. a: number, b: number을 통해서 a, b의 데이터 타입을 선언하였고, : number을 작성함으로써 반환값의 데이터 타입을 지정하였다. 방법 2 : 선택적 매개변수 사용하기 일부 매개변수를 선택적으로 받고싶을때 매개변수 뒤에 '?'를 작성한다. 이렇게 하면 매개변수를 받을지 받지 않을지 선택할 수 있다. function greet(name: string, greeting?: string): stri..

TypeScript에서의 Array와 Tuple의 데이터 타입 1. Array 타입 배열 선언 방법 (1) // 첫 번째 방법: 타입 + [] let arr1: number[] = [1, 2, 3]; 배열 선언 방법 (2) // 두 번째 방법: Array let arr2: Array = [1, 2, 3]; 2. Tuple 타입 Tuple 선언 방법 let tuple: [string, number, boolean] = ['Hello', 42, true]; Array와 Tuple의 차이점 Array - 길이가 가변적이며, 동일한 타입의 요소로 구성된다. Tuple - 길이가 고정되어 있으며, 각 요소의 타입이 정해져 있다. JavaScript에는 없는 데이터 타입이며, TypeScript에서만 사용 가능하다..

📌자바스크립트의 변수 데이터 타입 오류 ex) let myname = 'egoing'; myname = 1; -> 이러한 문제를 사전에 막아주지 못하고, 프로그램을 하던 중 나중에 버그를 발견하게 된다. 이로 인해서 큰 문제가 생길 수가 있다. -> 타입스크립트로 이러한 문제를 해결할 수 있다. 변수에 데이터 타입을 지정하는 방법 타입스크립트는 변수 선언 시 데이터 타입을 지정한다. 이렇게 하면 타입스크립트를 자바스크립트로 컴파일 할 때 데이터 타입에 다른 값이 할당되려 할 때 오류를 발생시켜 개발자에게 알려준다. 이를 통해서 코딩을 할 때 버그를 잡을 수 있다. ex) let myname = 'egoing'; // 오류 발생 myname = 1; 데이터 타입의 종류 number : 숫자 타입, 정수와 ..

cmd를 통해서 react로 새로운 프로젝트를 만든다. npx create-react-app error ➡️user라는 props를 받아와서 해당 데이터의 id와 username 값을 보여주기. App.js 추가 import React from 'react'; import User from './User'; function App() { const user = { id: 1, username: 'dadat' }; return ; } export default App; User.js 추가 import React from 'react'; function User({ user }) { return ( ID: {user.id} Username: {user.username} ); } export default U..

📢생명주기 메소드란? 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메소드들이다. -> 생명주기 메소드는 클래스형 컴포넌트에서만 사용이 가능하다. index.js 코드 변경 import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import LifeCycleSample from "./LifeCycleSample"; // 랜덤 색상을 생성합니다 function getRandomColor() { return "#" + Math.floor(Math.random() * 16777215).toString(16); } function App() { const [color..

📌클래스형 컴포넌트를 사용하는 이유는 많을 수 있다. -> 프로젝트를 유지보수하는 경우, 함수형 컴포넌트 + Hooks로 못하는 작업일 때도 있고, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks가 지원이 안되는 경우가 있다. 이렇게 클래스형 컴포넌트를 잘 사용하지는 않지만 사용해야하는 상황이 생길 수 있다. ➡️클래스형 컴포넌트를 사용해서 Hello.js 변경. 📌클래스형 컴포넌트에서 있어야하는 것 -> 클래스형 컴포넌트에는 render() 함수가 무조건 있어야 한다. 그리고, props를 조회하고 싶을 때에는 this.props를 조회하면 된다. Hello.js 변경 import React, { Component } from 'react'; class Hello extends Compon..

➡️React.memo를 사용하여 리렌더링을 방지하여 리렌더링 성능 최적화 해주기 📌React.memo 함수 사용법 : React.memo(함수 명); ex) export default React.memo(UserList); CreateUser.js 수정 전 export default CreateUser; 수정 후 export default React.memo(CreateUser); UserList.js 수정 전 export default UserList; 수정 후 export default React.memo(UserList); 이렇게 바꾸고 코드를 실행해보면, 한가지 문제가 있다는 것을 알 수 있다. 📢User 중 하나라도 수정하면 모든 User들이 리렌더링 되고, CreateUser도 리렌더링이 된..

📌저번시간에 useRef를 배울때 컴포넌트에서 특정 DOM을 선택해야할 때, ref를 사용한다고 했다. 그 이외에도 ref의 사용법은 있다. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것이다. App.js 변경 import React from 'react'; import UserList from './qoffhvjxm/UserList'; function App() { const users = [ { id: 1, username: 'dndhk', email: 'dndhk@gmail.com' }, { id: 2, username: 'Lee', email: 'Lee@gmail.com' }, { id: 3, username: 'dada', email: 'dada@gmail.com' } ];..

InputSample.js 파일 추가 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; ➡️input에 값을 입력하면 그 값이 하단에 나타나게하고, 초기화 버튼을 누르면 input값이 비워지도록 구현하기. 📌e.target.value을 불러오면 input에 담긴 값을 확인 할 수 있다. 📌input의 상태를 업데이트를 할때에는 value값을 필수적으로 지정해줘야한다. InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(""); c..

➡️ +1, -1 을 수행하는 코드 만들기 시작화면 우선 +1, -1 버튼을 클릭했을때 특정 문구를 뜨게한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { SVGAnimatedNumber() } const onDecrease = () => { console.log("-1"); } return( 0 +1 -1 ); } export default Counter; 결과사진 이렇게 버튼이 잘 클릭되는걸 확인할 수 있다. 📌여기서 화살표 함수를 이용하는 방법을 배워볼 수 있다. const 함수명 = (변수) => { return 리턴값; }; 그리고 우리가 하고싶은 동작을 함수로 실현시킨다. 📌컴포넌트에서..