리액트 마스터 클래스

React와 TypeScript에서의 Props 사용 방법을 알아보자! 아래 코드는 Circle 컴포넌트를 만들고, App에서 Circle 컴포넌트를 렌더링하는 간단한 로직이다.Circle 컴포넌트를 import한 후 두 개의 Circle를 렌더링하여 각각의 prop

React와 TypeScript를 사용하여 간단한 Forms을 만들어보자! 아래의 코드는 사용자가 버튼을 클릭하면 콘솔에 사용자 이름이 로그되는 코드이다.useState 훅을 사용하여 username 상태를 설정한다.event가 input 요소의 이벤트 객체임을 Typ

TypeScript에서 styled-components를 사용해 어떻게 테마 설정을 하는지 알아보자!npm install @types/styled-componentsstyled.d.tsstyled.d.ts 파일을 생성하여 styled-components의 Default

기존 코드 분석 기존에는 useState와 useEffect를 사용하여 데이터를 가져오고, coins와 loading의 상태를 직접 관리하고 있다. React Query 설정 React Query를 사용하기 위해 먼저 QueryClient를 생성하고, QueryCli

Recoil을 이용해서 리액트 프로젝트에 다크모드를 적용해보려고 한다!🌙 Atom 생성 먼저, atom을 생성하여 테마모드를 저장하는 상태를 만든다. RecoilRoot 설정 App 전체에서 Recoil을 사용할 수 있도록 RecoilRoot로 감싸준다. the

아래와 같은 form을 만들고 submit하려면, input 태그와 그에 따른 onChange 이벤트 핸들러, state, errorState를 각각 만들어줘야 한다. react-hook-form을 이용하면 이 모든 것들과 validation은 유지하되, 코드를 효율적

framer-motion을 활용하여 데모에 있는 간단한 애니메이션을 직접 만들어보며 연습해보자!🔗 https://www.framer.com/motion/drag: drag 적용하기drag="x": x축에서만 drag 가능drag="y": y축에서만 drag