렌더링이란? 렌더링이란 현재 props 및 상태를 기반으로 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정 이때, DOM이란 웹 사이트를 열 때 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현하는 것 렌더링 발생 조건 컴포넌트의 상태 변경 (setState 함수 실행할 때 React 트리거 업데이트 됨) props가 변경되어도 업데이트 되지 않는 이유? props를 setState로 올바르게 업데이트하지 않았거나, props의 참조가 동일할 경우 혹은 props자체는 부모 컴포넌트가 렌더링 될 때 가져오기 때문에 부모의 렌더링이 일어나지 않으면 props가 교체되지 않음 부모 컴포넌트 랜더링 ⇒ 부모 컴포넌트가 렌더링 될 시 하위 컴포넌트는 모두 렌더링됨(리액트는 기본적으로 컴포넌트를..
react
안녕하세요 오늘은 Next.JS(v.13) + TypeScript 환경에서 무한스크롤 구현하는 방법에 대해 알아보겠습니다 배경.. 프로젝트에서 숙박 아이템을 확인할 수 있는 리스트를 구현하는데 모든 아이템을 한번에 가져와서 보여줄 수도 있지만 그렇게 하면 초기 렌더링 속도가 늘어나는 단점이 있어 무한스크롤로 구현하였습니다! 무한스크롤 구현하기! 1. 서버로 부터 받는 데이터 정의 처음 무한스크롤을 구현한다고 백엔드 분께 얘기했을 때 백엔드 분들께서 그럼 데이터를 어떤 형식으로 보내줘야 하냐고 여쭤보셨습니다 무한스크롤에 필요한 데이터는 다음과 같습니다 실제 아이템 리스트 데이터 현재 페이지 넘버 다음 페이지가 존재하는지 boolean 값 2. 무한스크롤 구현 저는 React Query에서 useInfini..
서론.. 본격적으로 API를 호출하면서 useQuery, useMutaion 등 React Query를 사용하게 되었다 React Query가 무엇인지 정확하게 알고가야 동작 원리를 제대로 파악할 수 있을 것 같아 알아보고자 한다 React Query이란 데이터 fetching, caching, 동기화, 서버 데이터 업데이트 과정 등을 간소화하여 개발자가 서버 상태 관리에 드는 복잡성과 시간을 줄일 수 있도록 설계된 라이브러리 공식 문서에 사용법이 잘 설명되어 있다! https://tanstack.com/query/latest/docs/framework/react/reference/useQuery useQuery | TanStack Query Docs tanstack.com 왜 사용하는데? 서버 상태 관..
사용법 기본적인 사용법은 먼저 Zod에서 z를 불러와 z.object()를 통해 객체인 스키마를 정의한다! export const loginSchema = z.object({ email: z .string() .min(1, '이메일을 입력해주세요.') .regex( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, '이메일 형식을 확인해주세요.', ), password: z.string().min(1, { message: '비밀번호를 입력해주세요.' }), }); z.string()으로 여러 validation을 추가할 수 있다! 잘 설명되어있는 아래 링크를 참고해 볼 수 있겠다! https://velog.io/@tmdgp0212/Zod String 형 말고도 num..
서론... 리액트를 개발하면서 .js 파일과 .jsx 파일을 사용하는데 보통은 .jsx를 사용한다고만 알고있었지 실제로 둘의 차이점을 복기해가면서 개발하지 않았던 것 같다 두 파일의 차이점에 대해 의문이 들었고 개발을 하는데 이런 기본적인 지식을 모르고 개발한다니! 라는 생각이 들어 찾아보게 되었다 .js 파일 .js 확장자의 파일은 일반적인 자바스크립트 파일이다 즉 일반적인 Javascript 구문만을 사용하여 동작한다 .jsx 파일 .jsx 파일은 Javascript XML의 약자로 React 컴포넌트를 js 파일 내에서 작성할 수 있는 문법 확장이다. 즉, js 파일 내에서 UI 컴포넌트를 정의할 수 있고 HTML 과 유사한 구문을 사용해 UI 구조를 보다 직관적으로 작성할 수 있게 하는게 jsx ..
서론.. 프로젝트를 진행하면서 zodSchema 라는 파일을 마주보게되었다 파일 안에 들어있는 함수들을 쭉 둘러보니 유효성 검사를 진행하는 함수임을 알 수 있었다 여기서 Zod 라는 것을 또 새롭게 알게되고 알게된 내용을 정리하고자 한다.. Zod란? Zod는 TypeScript 용으로 만들어진 스키마 검증 및 파싱 라이브러리이다. 공식문서는 아래와 같다.. https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference TypeScript-first schema validation with static type inference - GitHub - colinhacks/zod: Typ..
서론... 프로젝트를 진행하면서 react-hook-form을 처음 접해보게 되었다 처음 들어본 라이브러리고 또 어떻게 사용하는지 몰랐는데 다른 팀원분이 사진과 같은 체크박스를 개발할 때 react-hook-form을 사용하면 개발할 때 훨씬 편리해진다고 하셨고 나 또한, 이러한 체크박스를 개발했어야 해서 공부하게 되었다! react-hook-form이란 React에서 폼을 더 쉽게 다루기 위한 라이브러리이다. 공식 사이트는 아래와 같다. https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to..
커스텀 훅 (Custom Hook) 이름이 use로 시작하는 자바 스크립트 함수로 서로 다른 두 개이상의 자바스크립트 함수에서 같은 로직을 공유할 때 해당 로직을 재사용 하기 위해 작성한다 커스텀 훅을 사용하면 코드의 중복을 줄이고 컴포넌트의 재사용성과 유지보수성을 높일 수 있다. https://ko.legacy.reactjs.org/docs/hooks-custom.html 자신만의 Hook 만들기 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org React 공식 홈페이지에서도 설명하는 커스텀훅 프로젝트를 진행하면서 코드 Rectoring을 진행하면서 API호출 코드를 비지니스 로직을 분리하기 위해 커스텀 훅으로..
