DEV/React

Zod + React Hook Form으로 폼 유효성 검사 구현하기최근 프로젝트에서 폼 유효성 검사를 구현하면서 비밀번호 확인, 이메일 형식 체크, 실시간 검증 등 생각보다 복잡한 요구사항들이 많았습니다.여러 방법을 찾아보다가 Zod와 React Hook Form 조합을 사용하게 되었는데, 정말 효과적인 선택이었습니다.이 글에서는 제가 실제로 사용하면서 겪었던 경험들을 공유해보겠습니다.Zod와 React Hook Form 소개Zod란 무엇인가요?처음에는 useState로 폼 상태를 관리하고, if문으로 검증을 하고 있었습니다. 그런데 폼이 복잡해질수록 코드가 지저분해지는 문제가 발생했습니다.Zod는 데이터의 형태와 규칙을 정의하는 스키마 검증 라이브러리입니다. TypeScript 타입도 자동으로 생성해주..

React-Hook-Form을 사용한 이유사소하게는 폼을 제출할 때 자동으로 발생되는 새로고침을 막기위해 당연한 듯이 작성하게 되는 event.preventDefault() 같은 보일러 플레이트를 사용하지 않을 수 있는 것 부터 관리해야할 상태코드를 줄일 수 있고 폼 작성을 위한 여러 기능들을 제공하고 비제어 컴포넌트 로 작성할 수 있으며 보다 선언적으로 코드를 작성할 수 있다. 제어 컴포넌트와 비제어 컴포넌트는 무엇일까?제어 컴포넌트는 일반적인 리액트 컴포넌트라고 할 수 있다. 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 하는 컴포넌트이다. state를 기반으로 하기 때문에 사용자가 입력을 할 때마다 리렌더링을 발생시킨다.비제어 컴포넌트는 리액트에 의해 값이 제어되지 않는 컴포넌트이다..

메모이제이션 (memoization)이란메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. (위키 백과) 쉽게 이야기하면, 컴퓨터의 입장에서 비용이 높은 함수의 호출 결과를 저장해 두었다가, 완전히 동일한 입력으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 두었던 결과를 반환해주는 것이다.리액트의 메모이제이션리액트에서는 부모 컴포넌트가 변경되면 자식 컴포넌트도 무조건 리렌더링된다. React.memo 를 사용해 컴포넌트를 래핑하면 렌더링이 일어나지 않는다. 렌더 단계에서 컴포넌트를 비교를 거쳤지만 ..

함수형 컴포넌트에서 상태를 사용하거나 생명주기 메서드를 대처하는 등의 다양한 작업을 하기위해 Hook 이란 것이 추가됐다.useState함수형 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 해주는 훅이다. 클로저를 사용함으로써 외부에 해당 값을 노출시키지 않고 오직 리액트에서만 쓸 수 있고 함수형 컴포넌트가 매번 실행되더라도 useState에서 이전의 값을 정확하게 꺼내 쓸 수 있다.const [count, setCount] = useState(0)return ({count} setCount(count + 1)}>+ setCount((prev) => prev - 1)}>- setCount(0)}>reset); useState의 인수로는 초기화 값을 넘겨주고 반환값으로 배열을 받는다. 반환받은 배열의 ..

최근 오픈소스에 관심을 가지면서, 오픈소스는 어떻게 만들어져 있는지에 대한 궁금증이 생겨서 직접 배포해보려고 한다. CRA로 기본적인 프로젝트 설정을 해준다.$ npx create-react-app my-App필요한 의존성을 설치해준다. 기본적으로 react jsx 트랜스파일은 필요하다.$ npm i -D @babel/cli @babel/preset-react이제 리액트 컴포넌트를 가져오자.src/lib 경로에 폴더를 만들어서 넣어준다.src/lib/Component├── Component.hook.js├── Component.jsx├── Component.styles.css└── index.js Component.jsx같은 jsx 파일은 React.createElement로 엘리먼트를 생성하기 때문에 ..

SSR을 사용하면 서버의 React 컴포넌트에서 HTML을 생성하고 해당 HTML을 사용자에게 전송할 수 있다.HTML은 링크나 폼 입력과 같은 간단한 내장 웹 상호작용을 제외하고는 상호작용이 잘 되지 않는다하지만 자바스크립트가 로딩되는 동안 사용자가 페이지의 콘텐츠를 볼 수 있다.SSR을 사용하지 않으면 자바스크립트가 로드되는 동안 사용자에게 표시되는 것은 빈 페이지 뿐이다.React의 SSR의 진행 단계서버에서 전체 앱의 데이터를 가져온다. 서버에서 전체 앱을 HTML로 렌더링하여 응답으로 전송한다. 클라이언트에서 전체 앱에 대한 JavaScript 코드를 로드한다. 클라이언트에서 자바스크립트 로직을 전체 앱에 대해 서버에서 생성된 HTML에 연결한다(이것이 'hydration').중요한 부분은..