stonesy

React Router단계1. react router 설치npm install react-router-dom 2. src/main.jsx 또는 src/main.tsx 파일을 열어 React Router의 BrowserRouter로 애플리케이션을 감싼다.import React from 'react'import ReactDOM from 'react-dom/client'import { Provider } from 'react-redux';import { store } from './app/store';import { BrowserRouter } from 'react-router-dom'import App from './App.jsx'ReactDOM.createRoot(document.getElementById..

Custom HookCustom Hook은 다음과 같은 경우에 사용하면 좋다고 한다.재사용성: 여러 컴포넌트에서 동일한 로직을 반복해서 사용하는 경우, Custom Hook으로 분리하면 코드를 재사용할 수 있어 유지보수가 용이하다.컴포넌트 가독성 향상: 컴포넌트 내부에 비즈니스 로직이 많아지면 가독성이 떨어질 수 있다. Custom Hook으로 로직을 분리하면 컴포넌트가 더 깔끔하고 이해하기 쉬워진다.단일 책임 원칙: 컴포넌트가 한가지 책임만 가지도록 하기 위해 Custom Hook을 사용해 로직을 분리하면 좋다. 이렇게 하면 각 컴포넌트가 명확한 역할을 가지게 되어 코드의 유지보수가 쉬워진다.상태 관리와 부수 효과 처리: 복잡한 상태 관리나 부수 효과(side effects)를 처리할 때, Custom..

🔎재사용 가능한 & 일관성 있는 컴포넌트 만들기버튼 컴포넌트를 재사용 가능하게 + 일관성 있게 만들어보자. 1. 목표/요구사항1) 버튼의 shape은 항상 동일해야 한다.버튼의 전체적인 모양은 변하지 않아야 한다. 즉, 어떤 크기를 갖든, 어떤 색을 갖던지 간에 border-radius, padding 값에 대한 속성들은 고정되어 있어야 한다. 2) variant props을 통해 preset된 색상을 선택할 수 있어야 한다.일관성 있는 디자인을 구현하기 위해 제한적으로 props를 통해 정의된 스타일을 적용할 수 있도록 만든다.미리 정의된 색을 variant라는 props을 이용하여 선택할 수 있도록 만든다. 3) size props를 통해 preset된 크기를 선택할 수 있어야 한다.색상과 마찬가지..

Nomad Coders 강의는 예전에 들었었는데 노션에 정리한 내용을 블로그에도 정리하면 좋을 것 같아서 복습 겸 정리를 해보았다. React 프로젝트에 CSS를 적용하는 방식에는 직접 CSS를 적용하는 방식, module.css를 사용하는 방식, styled-components를 사용하는 방식 등이 있다. 1. 직접 CSS를 적용하는 방식 가장 단순한 방식인데, hover 등의 이벤트 등을 적용할 수 없다. function Header(){ return( Header ) } 2. module.css를 사용하는 방식 내가 프로젝트를 진행할 때 가장 많이 사용하는 방식이다. 파일이름.module.css라는 이름을 가진 파일을 만들고 styles를 불러와 사용한다. *Header.tsx 파일 import s..