React9 [React] React Hook Form 1. React Hook Form_① React Form 예제 (간단한 To Do List)_② React Form 예제 2 (React Hook Form update)2. React Hook Form, APIs1. React Hook FormReact Hook Form은 React에서 'form'을 좀 더 사용하기 편하게 해주는 라이브러리로의 상태 state와 유효성 검사를 처리하기 위한 간편한 방법을 제공해 주는 라이브러리다. React Hook Form은 아래 명령어를 입력해서 설치할 수 있다.npm install react-hook-form 백문이 불여일견, 기존에 React에서 form을 다루던 방식을 아래 예제를 통해서 복습해 보자.① React Form 예제 (간단한 To Do List) .. 2024. 8. 26. [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. [styled-components] styled-components 1. styled-components란 무엇인가?https://styled-components.com/docs/basics#motivation styled-components: BasicsGet Started with styled-components basics.styled-components.com 공식 문서에 따르면, styled-components는 React Component의 CSS Style 설정을 좀 더 편하게 하기 위해서 고안된 라이브러리라고 한다. React 컴포넌트의 스타일을 css 파일을 통해서 설정하는 방식과 styled-components 사용해서 스타일을 지정하는 방식은 무슨 차이가 있을까? 아래 예제를 통해서 이 둘의 차이를 한 번 비교해 보자. ① css 파일을 통해서 sty.. 2024. 6. 26. [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 Router]<Link> 태그 Issue 해결하기 1. 문제 설명 위의 이미지와 같은 특정 날짜를 기준으로, 주간 박스 오피스 정보를 출력하는 웹 페이지에서영화 제목을 클릭하면, 해당 영화에 대한 상세 정보가 적힌 웹 페이지로 넘어가는 기능을React Router를 활용해서 구현하고 정상적으로 동작하는 지 테스트를 해봤다. 더보기'Home.js' (영화 웹 페이지의 기본 화면 담당) import { useState } from "react";import { useEffect } from "react";import Movie from "../Components/Movie";function Home(){ const [Loading, setLoading] = useState(true); const [Movies, setMovies] = useSt.. 2024. 2. 13. [React] state 더보기 📃 목차 1. 개요 / 버튼 예제 구현 2. state의 정의 ① state ② state 사용해 보기 3. 버튼 예제 Update 1. 개요 / 버튼 예제 구현 React를 활용해서 버튼 하나와 버튼을 클릭한 횟수를 보여주는 간단한 예제를 하나 만들어보자. // 'index.html'의 'root' 요소에 App Component가 성공적으로 Rendering 됐다면 아래 이미지처럼 안내 메시지와 버튼 그리고 버튼 클릭 횟수를 기록하는 문구가 보일 것이다. 여기서 버튼을 클릭했을 때 하단의 '버튼 클릭 횟수: 0회'에 변화가 있어야 하지만 실제로 확인해 보면 처음 상태 그대로인 것을 볼 수 있다. 버튼을 클릭했을 때, ClickCount 함수가 정상적으로 실행되는지 확인하기 위해서 해당 함수 내.. 2024. 1. 29. [React] React Component 생성법 1. React Component 2. React.createElement() 3. JSX ① JSX ② JSX 코드에 JavaScript 추가하기 1. React Component React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로 React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다. 여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다. 이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다. 이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다. https://www.instagram.com/ Instagram w.. 2024. 1. 5. [React] 개발 환경 설정 📃 목차 1. ReactJS 개발 환경 설정하기 ① React 설치하기 ② React 개발 모드와 배포 모드 2. Create React App ① node.js 설치 ② React 설치 ③ 프로젝트 폴더 구성 ④ React 예제 실행하기 📕 Reference React 개발 환경을 설정하는 방법은 두 가지가 존재한다. 하나는 이 글을 쓰는 시점에서 위의 ② React 개발 모드와 배포 모드 React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자. 앞에서 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로 프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가 포함되어 .. 2023. 12. 12. 이전 1 다음
