REACT 썸네일형 리스트형 [Library] React와 NextUI를 활용한 커스텀 셀렉터 컴포넌트 구현 가이드 (feat. TailwindCSS) 사용 기술 스택: `@nextui-org/react`, `React`, `TailwindCSS` 1. 프로젝트 설정먼저, 이 프로젝트에 필요한 라이브러리를 설치합니다.$ npm install @nextui-org/react 2. 데모 예시 3. 커스텀 셀렉터 컴포넌트 구현이 컴포넌트는 @nextui-org/react에서 제공하는 Select와 SelectItem 컴포넌트를 사용합니다. "use client";import { Select, SelectItem } from "@nextui-org/react";import React, { useState } from "react";const items = { ALL: "모든 타입", LEGACY: "Legacy", V1: "Version 1", V2:.. 더보기 [Library] react-intersection-observer 사용법과 예시 (feat. react95) 사용 기술 스택: `react-intersection-observer`, `React`, CSSModule`1. 프로젝트 설정$ npm install react-intersection-observer --save 2. 데모 예시3. 사용 코드Text, Windows 컴포넌트는 `react-intersection-observer` 라이브러리를 사용하여 스크롤할 때 요소가 화면에 들어오면 애니메이션이나 스타일을 적용할 수 있는 기반을 제공합니다. 1) 화면에 글자 보여주기/* Text.module.css */.text { transition: all 0.3s ease-in-out;}.opacity100 { opacity: 100; transform: translateY(0);}.opacity0 { .. 더보기 [React] 컨텍스트(context API) 1. useState로 상태관리 코드 구현import { useState } from "react";import Home from "./components/Home";import Navbar from "./components/Navbar";export default function App() { const [count, setCount] = useState(0); return ( );}export default function Home({ count }: { count: number }) { return ( Home Component {count} );}import Banner from "./Banner";export type Count.. 더보기 [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.. 더보기 이전 1 다음
