React7 [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 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. [TypeScript] create-react-app에 TypeScript 설치하기 1. 'create-react-app'에 TypeScript 설치하기npx create-react-app my-app 위의 명령어는 React App을 만들 때 사용하는 명령어이다.여기서 아래와 같이 '--template typescript' 추가하면 TypeScript를 같이 설치할 수 있다.npx create-react-app my-app --template typescript설치가 완료되면, 기존에 'create-react-app'으로 생성된 React App 초기 파일에서TypeScript와 관련된 파일이 추가 혹은 변경된 것을 확인할 수 있다.(CRA 기본 프로젝트와 관련된 파일들을 개별적으로 정리한 뒤에 캡쳐한 것이다.)앞에서 다룬 명령어는 React App을 처음부터 생성하는 명령어이다.즉,.. 2024. 4. 20. [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. 이전 1 2 다음
