하루코딩 세싹이

react-hook-formreact-hook-form은 React에서 폼을 간단하고 효율적으로 관리할 수 있게 도와주는 라이브러리로, 최소한의 리렌더링으로 빠른 성능을 제공하며, 입력값 등록(register), 검증(validate), 상태 추적(watch), 제출 처리(handleSubmit) 등을 쉽게 구현할 수 있다. 기존의 복잡한 폼 상태 관리 방식보다 코드량이 적고 직관적이며, 유효성 검사 라이브러리와도 쉽게 연동할 수 있어 유지보수가 편리한 것이 특징이다. useForm폼 전반을 관리하는 핵심 훅 기능: 등록, 제출, 초기값, 에러 상태 관리 등 const { register, handleSubmit, formState: { errors } } = useForm(); useFormConte..

함수(Function)React 프로젝트에서 const로 함수(컴포넌트 포함)를 만드는 문법은 화살표 함수(arrow function)를 사용하는 방식이다.함수는 보통 컴포넌트 내부에서 만든다. 공통으로 여러 컴포넌트에서 쓰는 경우는 별도 파일에 빼서 import 한다. useEffect 안에서도 함수는 만들 수 있다. useEffect 안에서 const 함수를 선언하고 바로 실행하면 된다.용도문법일반 함수const fn = () => {}파라미터 있을 때const fn = (x) => x * 2리액트 컴포넌트const Component = () => ...리액트 컴포넌트(props 받기)const Component = ({ prop }) => {...}이벤트 핸들러const handleClick = (..

React.FC는 Functional Component의 타입, FC는 FunctionComponent의 줄임말! React.FC는 React의 함수형 컴포넌트(Function Component)에 타입을 지정하는 데 사용하는 TypeScript 제네릭 타입이다. 이를 사용하면 컴포넌트가 받을 props 타입을 명시할 수 있고, 자동으로 children prop도 포함된다. 예를 들어 const MyComponent: React.FC = ({ name }) => { ... }처럼 작성하면 MyComponent가 name이라는 prop과 children을 받을 수 있음을 타입스크립트가 인식한다. 다만 최근에는 children 자동 포함이 API 명확성을 해치고, 반환 타입(JSX.Element)은 Typ..

Alias 이해하기"Alias(별칭)"라는 용어는 일반적으로 모듈 임포트 시 경로를 짧게 쓰기 위해 사용하는 별칭 설정을 의미한다. 주로 Webpack, Vite, Create React App 등에서 설정하여 코드의 가독성과 유지보수성을 높이는데 사용된다. 개발을 하다 보면 ../../../components/Button 처럼 경로가 길어지는 경우가 있는데 alias를 사용하면 @components/Button 처럼 경로를 간단하게 쓸 수 있다는 장점이 있다. alias는 경로가 길어지거나 프로젝트 구조가 깊어질 때 유용하고 리팩토링 시 경로 변경을 쉽게 처리할 수 있다. alias 사용 방법은 빌드 도구에 따라 사용법이 다르다. Webpack 사용 시// webpack.config.jsconst..

타입을 정의할 때 사용하는 keyof Tkeyof T는 TypeScript에서 특정 타입 T의 모든 키 이름을 유니온 타입으로 만들어주는 유틸리티 타입이다. 예를 들어 type User = { name: string; age: number }일 때, keyof User는 'name' | 'age'가 된다. 이는 타입 수준에서만 존재하며, 코드 실행 중에는 사용할 수 없고 주로 제네릭 함수에서 타입 안전한 키 접근이나 매핑 타입을 만들 때 활용된다. keyof T는 T 타입의 키들(속성 이름들)을 가져온다. [P in keyof T]는 그 키들 각각에 대해 순회하고, ?는 선택적 속성으로 만든다는 뜻이다.type Partial = { [P in keyof T]?: T[P];}; keyof T는 TypeS..

hook.js:608 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components Error Component Stack at input () at div () ..

React는 원래 "상태(state) 기반의 UI 선언형 프레임워크"이기 때문에, 보통 DOM을 직접 제어하지 않고 상태를 바꾸면 자동으로 UI가 바뀌도록 설계되어 있다. 하지만, 일부 상황에서는 DOM을 직접 제어해야 하는 경우가 있다. 입력 요소에 포커스나 선택 조작이 필요할 때, 스크롤 조작이 필요할 때, DOM의 크기나 위치를 즉정할 때 또는 외부 라이브러리을 연동할 때 외부에서 DOM을 직접 요구하는 경우는 DOM을 직접 제어해야한다. React에서는 가능한 한 상태로 UI를 제어하되, DOM을 직접 건드려야 할 특별한 상황에서는 ref를 통해 안전하게 제어할 수 있다. useRefref(useRef)는 reference(참조)의 줄임말로 React에서 DOM 요소나 컴포넌트에 직접 접근하..

React에서 PDF 다운로드 기능을 구현하는 방법은 여러 가지가 있지만, 사용자 브라우저에서 PDF 파일을 생성하고 다운로드 하도록 하는 방법이 가장 일반적이다. 가장 많이 쓰는 라이브러리는 jspdf, tml2canvas이다. 이 외에도 react-pdf와 pdfmake도 있다. jsPDF + html2canvasjsPDF는 자바스크립트로 클라이언트 측에서 PDF 파일을 생성할 수 있게 해주는 라이브러리이다. 기본적으로 텍스트, 이미지, 테이블, 도형 등을 코드로 직접 그리는 방식이며, save() 함수를 통해 사용자가 PDF 파일을 다운로드할 수 있도록 제공한다. 그러나 기본 내장 폰트는 영문 위주이기 때문에 한글을 출력하려면 별도의 폰트 파일을 등록해줘야 한다. 간단한 영문 PDF 문서나 ..

JSX와 TSX는 모두 React에서 UI를 만들 때 사용하는 문법이지만, TSX는 타입을 명확히 관리할 수 있는 TypeScript 기반이라는 차이가 있다. 초반에는 JSX로 시작할 수 있지만, 프로젝트가 커지거나 팀과 함께 작업한다면 TSX로 전환하는 것이 더 안정적이다.구분.jsx.tsx언어JavaScript + JSXTypeScript + JSX타입 사용타입 사용 불가타입 명시 가능컴파일러Babel 등 JS 컴파일러TypeScript 컴파일러React 문법JSX 문법 사용JSX 문법 + 타입 정의 사용 JSX(JavaScript XML)JSX는 JavaScript XML의 줄임말로, 자바스크립트 안에 HTML 같은 코드를 쓸 수 있게 해주는 문법이다. JSX는 브라우저가 직접 이해할 수 없기 때..

리액트 프로젝트는 모두 React를 기반으로 하지만, 사용하는 개발 도구(빌드 도구)에 따라 다르다.React 앱을 만들 때 주로 사용하는 CRA(Create React App) 과 Vite는 프로젝트를 빠르게 시작하고 실행할 수 있게 도와주는 빌드 도구(혹은 개발 환경 도구)를 말한다. CRA는 전통적인 방식이고, Vite는 최신 방식으로 빠르고 설정이 유연하다는 장점을 가지고 있다. CRA vs Vite 차이항목CRA (Create React App)Vite실행 명령어npm startnpm run dev설정 파일거의 숨겨져 있음 (eject해야 수정 가능)직접 설정 가능 (Vite config 파일 존재)빌드 속도느림 (웹팩 사용)매우 빠름 (ESBuild 사용)사용 기술Webpack 기반ESBuil..