React14 [React] Checkbox 예제 1. 개요 상단의 이미지는 필자가 예전에 만들었던 To Do List App의 모습이다.처음 일정을 만들고, 일정 아이템에서 '완료' 버튼을 클릭하면 해당 일정이 완료 처리가 되는 식이다. Microsoft의 To Do라는 프로그램을 실행한 모습을 가져와봤다. 이제 위의 이미지처럼 특정 일정의 체크박스를 클릭 시 해당 일정이 완료되게 해보려고 한다.버튼을 클릭해서 일정을 완료하는 것이 아니라, 좀 더 일반적인 To Do List에 가깝게 말이다. 실제로 구현 완료한 예제는 바로 다음 장에서 다루도록 하겠다.2. To Do List① Version 1 / To Do Item 한 개만 사용 예제 소스코드는 다음과 같이 작성하였다.import {useState] from "react";import {styl.. 2025. 2. 22. [React] Hook의 규칙 📔 목차1. 개요2. Hook의 규칙1. 개요이번에 공부한 것은 Hook, React Hook의 규칙에 대한 것이다.사실 React Hook의 규칙에 대해서는 예전, React를 처음 공부할 당시에 React 공식 문서 / Hook 규칙 파트를 본 적이 있었고, 공부한 내용을 정리까지 했었다. 그리고 이때 공부했던 것들은 시간이 지나면서 내 머릿속에서 점차 잊혀 갔고최근에 사이드 프로젝트를 진행하면서 다시금 Hook 규칙에 대한 기억을 갱신하게 됐다. 이거는 실제로 내가 사이드 프로젝트를 진행할 때 봤었던 Error 메시지인데React Query의 useQuery Hook을 onValid라는 임의의 함수에서 호출하는 코드를 짰다가 보게 됐다. 이는 React Hook을 함수 컴포넌트의 최상위 영역이 .. 2025. 2. 15. Framer Motion 맛보기 1. Framer Motion2. motion props ① props: animate ② props: initial ③ props: transition 3. Variants ① Variants의 정의 ② Variants 예제, Part 1 ③ Orchestration ④ Variants 예제, Part 24. Drag1. Framer MotionFramer Motion은 React에서 Animation 효과들을 쉽게 구현할 수 있게 해주는 라이브러리로아래 이미지처럼 Netflix 같은 데에서 사용되는 멋진 Animation 효과들을 구현할 수 있다. framer-motion 라이브러리는 아래 명령어를 입력해서 설치할 수 있다.npm install framer-motionframer-moti.. 2025. 1. 1. [Recoil] Selector 1. Selector① Selector의 정의 Recoil에서 Selector란 파생된 상태 (derived state)의 일부를 나타낸다.여기서 파생된 상태 (derived state)란 기존 recoil state (atom)를 입력 받고그걸 변형해서 반환하는 순수 함수에 전달된 상태 (state)의 결과물이라고 보면 된다. 이러한 Selector는 selector() 함수를 통해서 생성할 수 있다.const toDoSelector = selector({ key: "toDoSelector", //고유 key 값 get: ({get}) => {}});② get Selector의 get 속성은 get 메서드를 인자로 전달 받는다.이때 전달받은 get 함수를 통해서 atom이나 다른 Select.. 2024. 11. 16. [Recoil] Recoil 맛보기 목차 1. Recoil ① Recoil 정의 및 설치 방법 (npm 기준) ② 상태 관리를 사용하는 이유2. RecoilRoot3. Atom4. Recoil Hook ① useRecoilValue() ② useSetRecoilState() ③ useRecoilState() 1. Recoil① Recoil 정의 및 설치 방법 (npm 기준) Recoil은 React를 개발한 Meta 사에서 만든 상태 관리 라이브러리로'atom'이라는 것을 통해서 React의 상태 (State)를 관리한다.Recoil은 npm에 존재하는 라이브러리이기 때문에, 아래 명령어를 통해서 설치한다.npm install recoil② 상태 관리 (State Management)를 사용하는 이유 다음 장으로 넘어가기 전에 잠.. 2024. 11. 6. React Hook Form 맛보기 1. React Hook Form_① React Form 예제 (간단한 To Do List)_② React Form 예제 2 (React Hook Form update)1. React Hook FormReact Hook Form은 React에서 'form'을 좀 더 사용하기 편하게 해주는 라이브러리로의 상태 state와 유효성 검사를 처리하기 위한 간편한 방법을 제공해 주는 라이브러리다. React Hook Form은 아래 명령어를 입력해서 설치할 수 있다.npm install react-hook-form 백문이 불여일견, 기존에 React에서 form을 다루던 방식을 아래 예제를 통해서 복습해 보자.① React Form 예제 (간단한 To Do List) import {useState} from ".. 2024. 8. 26. 이전 1 2 3 다음
