React-Toastify를 처음 써보는 사람의 간단 사용법 정리

생각보다 사용법은 너무 쉬워서 공식문서에서 만드는 것만으로도 사용 가능하다playground에서 만든 걸 붙여넣기하면 된다 구웃 공식문서에서 코드를 빌려보자면, 2가지 조건만 지키면된다.필요 조건1. ToastContainer 를 한번 렌더링한다. (루트에서 렌더링하는 것이 가장 좋다)2. import 'react-toastify/dist/ReactToastify.css'; 로 스타일을 불러와야한다.  import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; // minified version is also included..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 7. 10.
• textsms

class-variance-authority (cva) 사용법 간단 정리

cva란?cva는 class-variance-authority 라이브러리의 함수로, 조건부로 CSS 클래스 이름을 생성하고, 일관성 있는 UI 정의와 관리를 하기 위해 사용된다이 라이브러리는 다양한 변형(variants)을 정의하고, 이러한 변형을 기반으로 동적으로 클래스 이름을 생성할 수 있게 한다이를 통해 CSS 클래스 이름을 조합하고 조건부로 적용하는 작업을 간편하게 처리할 수 있다! cva(baseStyle, {option})먼저 코드를 보면 const buttonVariant = cva("rounded border font-semibold hover:brightness-90 active:brightness-75", { variants: { intent: { primary: "bg..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 7. 2.
• textsms

비슷해서 헷갈리는 Rest 파라미터, spread 연산자

function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..

• format_list_bulleted FrontEnd ✨/Javascript
• · 2024. 7. 2.
• textsms

react router Link에서 데이터 넘기기

다른 페이지로 이동할 때 Link 태그를 사용한다이때 Link 태그의 state에 전달할 값을 넘기면, useLocation을 사용해 값을 가져올 수 있다let { state } = useLocation();  실제로는 이렇게 사용했다 const location = useLocation();const { place_name: shop_name, road_address_name } = location.state;

• format_list_bulleted FrontEnd ✨/React
• · 2024. 6. 26.
• textsms

react router에서 useParams와 useSearchParams의 차이

useParamsurl 경로에서 동적 세그먼트를 가져오는데 사용된다url 경로 매개변수인 userId를 추출하여 UserProfile 컴포넌트에서 사용할 수 있다import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); return User ID: {userId};}function App() { return ( } /> );}export default App; url이 /user/123 인 경우, useParams는 {userId: '123'} 을 반환한다 ..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 6. 18.
• textsms

styled components에서 조건부 스타일링을 위해 true, false를 문자열로 전달해서 생겼던 에러

문제styled-components에서 highlight 속성으로 컬러를 구분하고 싶었다 먼저 Button은 재사용 컴포넌트이고, styled-components인 StButton을 사용한다  styled-components에서 prop을 전달할 때는 문자열로 전달했다 참고로 React는 컴포넌트에 전달된 props를 HTML 요소로 직접 전달한다이때, 비표준 속성(즉, HTML 표준 속성이 아닌 사용자 정의 속성)을 HTML 요소에 전달하면 경고가 발생하게 된다이는 React가 유효하지 않은 HTML을 렌더링하지 않도록 돕기 위해 발생한다  그런데 버튼의 컬러는 highlight 여부와 상관없이 항상 var(--second-color)가 지정되었다  해결 방법styled-components 지식이 부족..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 6. 12.
• textsms