본문 바로가기
반응형

프론트엔드

[React] 리듀서(useReducer) 1. 만만한 count 예제 스타투import { useState } from "react";import Example1 from "./Example1";import Example2 from "./Example2";function App() { const [count, setCount] = useState(0); return ( );}export default App; 타입 에러가 남.. type Example1 = { count: number; setCount: React.Dispatch>;};export default function Example1({ count, setCount }: Example1) { return ( Example1.. 더보기
[React] 메모이제이션(memoization) 1. 기본 자료형의 컴포넌트 자체를 메모이제이션 — React.memoimport { useState } from "react";import Counter from "./components/Counter";function App() { const [count, setCount] = useState(0); const [text, setText] = useState(""); const handlerClick = () => { setCount((prev) => { console.log(prev); return prev + 1; }); }; return ( setText(e.target.value)} /> 클릭 );}e.. 더보기
[React] 돔(DOM)과 가상돔(Virtual DOM) 카운터 예제로 가상DOM 공부하기1. 여러 번 호출했는데, 한 번만 숫자가 증가하네.. 이전 값을 참조 하지를 않오🥲import { useState } from "react";function App() { const [count, setCount] = useState(0); const handlerClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( Count: {count} 클릭 );}export default App;가상 DOM 특징은 중복된 함수를 .. 더보기
[React] 범용 컴포넌트 만들기(CSS Module 사용) button 연습 문제import Button from "./components/Button";function App() { return ( Add );}export default App;style Props를 App에 있는 Button 컴포넌트로 내려줄게요.import classNames from "classnames/bind";import styles from "./Button.module.css";type Button = React.ButtonHTMLAttributes & { children: React.ReactNode; style: { width: string; color: string; backgroundColor: strin.. 더보기
[React] 리액트 컴포넌트 CSS 스타일링 불필요한 코드 삭제하는 코드* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; color: inherit; list-style: none;}index.css 1. 리액트 컴포넌트 CSS 스타일링1) 외부 스타일(External Stylesheet)import "./Button.css";export default function Button() { return Button;} button { background-color: cornflowerblue; border: none; color: white; padding: 15px 32px; text-align: center; cursor: pointer;}B.. 더보기
[TypeScript] 유용한 타입 유틸리티 타입 유틸리티유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다. 기본 문법으로 충분히 타입을 변환할 수 있지만, 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다. Partial파셜(Partial) 타입은 모든 속성을 선택 속성 타입 정의할 수 있습니다.type Person = { name: string; age: number; address: string;};const person1:Partial = { name: "Jason", address: "LA"} Required모든 속성을 required하게 변경한다. 필수로 만들어주는 유틸리티 타입type Car = { make?: string; model?: string; year?: .. 더보기
[TypeScript] 제네릭(Generics) 제네릭(Generics)타입에 대한 결정을 함수 호출 시 적용할 수 있습니다.function getSize(arr: number[] | string[] | (number | string)[]) { return arr.length;}getSize([1, 2, 3]);getSize(["a", "b", "c"]);getSize(["a", "b", "c", 1, 2, 3]);위의 코드를 제네릭으로 바꿔보겠습니다.function getSize(arr: T[]) { return arr.length;}getSize([1, 2, 3]);getSize(["a", "b", "c"]);getSize(["a", "b", "c", 1, 2, 3]); 의 number 타입이 로 들어가서 T로 반환됩니다. 타입 추론으로 적어주.. 더보기
[TypeScript] 타입과 인터페이스 차이 타입스크립트자바스크립트에 값의 타입이 추가된 언어 타입(type)기본 타입에는 크게 다음 12가지가 있습니다.StringNumberBooleannullundefinedObjectArrayTupleEnumanyvoidneverconst color: string = "blue";const decimal: number = 6;const isDone: boolean = false;// undefined와 nullconst u: undefined = undefined;const n: null = null;// 객체const obj1: object = { name: "jungmin" };const obj2: { name: string } = { name: "jungmin" };// 배열const list1: num.. 더보기
반응형

티스토리툴바