TypeScript7 [TypeScript] TypeScript 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const Counter: React.FC = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>Increment );};2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. (예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.)import { useState, .. 2025. 5. 19. [TypeScript]React 개발 프로젝트에서 BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우 + Vite(트러블 슈팅) 원인 : React로 프로젝트를 개발하다 보면, BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우가 있습니다. 하지만 HashRouter로 변경하면 문제없이 동작하는데 그 이유를 알아보자. BrowserRouter 를 사용하면 화면이 안 나오는 이유 BrowserRouter는 history API를 활용하기 때문에, 사용자가 새로고침을 하면 문제가 발생할 수 있습니다.일반적으로 React 애플리케이션은 단일 HTML 파일(index.html)을 기반으로 동작합니다. 그런데 BrowserRouter를 사용할 경우, 새로고침을 하면 해당 경로(/about 등)에 대한 요청이 서버로 직접 전달됩니다.이는 개발 서버(Vite, Webpack Dev Server 등)가 해당 URL을.. 2025. 2. 28. [TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본 문법 모음) 1. 기본 사용법styled.div 사용2. Props로 동적 스타일props => 조건 ? 스타일 : 스타일3. 전역 스타일createGlobalStyle4. 다크 모드 지원ThemeProvider 활용5. 애니메이션keyframes 활용6. 반응형 스타일@media 사용7. 스타일 상속styled(기존 컴포넌트)8. Mixin 활용css 함수로 공통 스타일 정리9. as 활용컴포넌트 태그 변경1. 기본적인 스타일드 컴포넌트 생성styled.태그명import styled from "styled-components";const Container = styled.div` width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; backgrou.. 2025. 2. 23. [TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본) 장점동적 스타일링 : props를 이용해 컴포넌트 스타일을 동적으로 바꿀 수 있음.컴포넌트 단위 스타일 : CSS가 컴포넌트 내에서 바로 정의되기 때문에, 스타일과 컴포넌트가 더 잘 결합, 유지보수하기 쉬움.자동으로 클래스 이름 해시화 : 클래스 이름이 자동으로 고유하게 변환되기 때문에, 전역 스타일 충돌을 걱정할 필요가 없음.예시:import styled from 'styled-components';const Button = styled.button` background-color: ${props => props.primary ? 'blue' : 'gray'}; color: white; padding: 10px 20px; border: none; border-radius: 5px;`;const.. 2025. 2. 19. 이전 1 2 다음
