Frontend/React8 [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. [React] Toggle Button 구현하기 0. 개요최근에 Toy Project에 '라이트/다크' 모드로 전환하는 Toggle Button을 구현해야 할 일이 생겼다.다만 Toggle Button을 한 번도 구현해 본 적이 없기 때문에 다른 개발자분이 작성해둔 소스코드를 많이 참고하면서 구현을 진행하였다.1. 소스 코드import {styled} from "styled-components";import {useState} from "react";interface I_Toggle { toggle: boolean;}const Wrapper = styled.div` width: 300px; height: 300px; padding: 5px; background-color: ${(props) => props.toggle ? ".. 2024. 8. 7. [React Query] useQuery() 0. React Query란?React에서 비동기 로직을 좀 더 편하게 다룰 수 있게 도와주는 라이브러리로기존에 개발자가 구현하기 까다로웠던 isLoading, isError 등과 같은 기능들을 자체적으로 제공을 해준다. 이번 게시글은 React Query에 대해 이제 막 맛을 본 입장에서 React Query에 강의에서 배운 내용과 개인적으로 찾아서 공부한 내용을 정리해서 작성하였다. 따라서 이론적으로 정확하지 않은 내용이 대다수일 것 같은데이러한 내용은 나중에 React Query에 대해 좀 더 깊게 파고든 뒤에 보완하도록 하겠다.1. 간편한 데이터 관리- 데이터를 가져오고, 캐싱, 동기화 및 업데이트 처리를 간편하게 할 수 있게 해줌2. 실시간 업데이트 및 동기화- 실시간 데이터 업데이트 및 자동 .. 2024. 8. 3. [React] Plugin "react" was conflicted between "package.json 1. Error 발생저번 주에 동미참을 끝내고, 오래간만에 노트북을 들고 카페에서 코딩을 하게됐다.Project에 TypeScript 설치하고 코딩을 좀 하다가, 저번 주 수요일에 자택에 있는 데스크탑으로해당 프로젝트를 commit 했던 기억이 갑자기 떠올라서 평소에 했던 것처럼 git pull 하고 npm start 입력해서 Project를 실행했는데 생전 처음보는 에러가 내 눈 앞에 보였다.Plugin "react" was conflicted between "package.json 번역기를 돌려보니 plugin "react"가 "package.json"에서 충돌했다는 내용이다.일단 이를 해결하기 위해서 구글링을 해보니 아래와 같은 해결책을 확인할 수 있었다.1. 'package.json' 다시 저장.. 2024. 6. 3. [React] state 더보기 📃 목차 1. 개요 / 버튼 예제 구현 2. state의 정의 ① state ② state 사용해 보기 3. 버튼 예제 Update 1. 개요 / 버튼 예제 구현 React를 활용해서 버튼 하나와 버튼을 클릭한 횟수를 보여주는 간단한 예제를 하나 만들어보자. // 'index.html'의 'root' 요소에 App Component가 성공적으로 Rendering 됐다면 아래 이미지처럼 안내 메시지와 버튼 그리고 버튼 클릭 횟수를 기록하는 문구가 보일 것이다. 여기서 버튼을 클릭했을 때 하단의 '버튼 클릭 횟수: 0회'에 변화가 있어야 하지만 실제로 확인해 보면 처음 상태 그대로인 것을 볼 수 있다. 버튼을 클릭했을 때, ClickCount 함수가 정상적으로 실행되는지 확인하기 위해서 해당 함수 내.. 2024. 1. 29. 이전 1 2 다음
