본문 바로가기

IT개발75

[TypeScript]나만 보는 TypeScript 기초 메모장(배열 삭제, filter메서드) 기본적인 filter 메서드 개념filter 메서드는 배열을 순회하면서 주어진 조건을 만족하는 요소만 새로운 배열로 반환.const numbers = [1, 2, 3, 4, 5];const filteredNumbers = numbers.filter(num => num !== 3);console.log(filteredNumbers); // [1, 2, 4, 5] React에서 filter를 활용한 배열 삭제 기능import React, { useState } from "react";const MemoPad: React.FC = () => { const [tasks, setTasks] = useState(["공부하기", "운동하기", "책 읽기"]); const deleteTask = (index: nu.. 2025. 2. 15.
[TypeScript]나만 보는 TypeScript 기초 메모장(상태(state)에서 객체 형태로 저장, Map의 고유ID) type Task = { id: number; name: string; };는 언제 필요할까?이 type Task는 객체의 구조(타입)를 정의하는 역할.즉, 어떤 변수가 어떤 속성을 가지고 있어야 하는지 강제하는 것. tasks라는 상태(state)에서 각 할 일이 객체 형태로 저장. ex) {[고유ID, 입력값, [고유ID(2), 입력값(2)]}tasks 상태의 타입const [tasks, setTasks] = useState([]);tasks는 할 일(Task) 객체들의 배열.따라서, tasks 배열에 들어가는 모든 요소는 Task 타입을 따름만약 type Task를 안 쓰면? 타입스크립트가 타입 검사를 제대로 못 함! 예를 들어, id 없이 tasks를 만든다면?const newTask = { n.. 2025. 2. 15.
[TypeScript]나만 보는 TypeScript 기초 메모장(map 고유ID) index를 사용하는 이유 & ID를 쓰는 이유map()을 사용할 때, React는 각 항목이 고유한 식별자(key)를 가지면 React가 리스트를 효율적으로 업데이트할 수 있습니다.index를 key로 사용한 경우{tasks.map((task, index) => ( ))} index는 배열에서 현재 항목의 위치(순서)를 나타냄.예를 들어, tasks = ["A", "B", "C"]가 있으면0A1B2C문제점새로운 항목이 추가되거나 삭제되면 index가 바뀜.React는 key 값이 바뀌는 걸 감지 못하고, 예상치 못한 렌더링 문제가 발생 가능성.고유한 ID를 key로 사용한 경우(추천)TodoList.tsximport React, { useState } from "react";import TodoIte.. 2025. 2. 15.
[TypeScript]나만 보는 TypeScript 기초 메모장 "자바스크립트"와 "타입스크립트"의 차이점 : 타입 유무 const message = "hello"; console.log(message); const message1: string = "hello2"; console.log(message1); //message: string은 message가 문자열 타입임을 명시.React.FC : 리액트 컴포넌트 타입import React from "react";const HelloWorld: React.FC = () => { return Hello, World!;};export default HelloWorld;props의 전달 방식( Props란? )import React from "react";type HelloWorldProps = { name: .. 2025. 1. 31.

티스토리툴바