FE/React

컴포넌트 리액트 컴포넌트란 UI를 구성하는 최소 단위 클래스형 컴포넌트 extends 키워드를 사용해 React.Component 클래스 상속받음 render() 메소드를 이용해 UI 정의 state, props를 이용해 상태 관리 state의 경우 this.state로 접근 가능하고 this.setState() 메소드를 이용해 업데이트할 수 있음 라이프사이클 메서드를 사용해 컴포넌트의 생성, 업데이트, 제거에 대한 로직 구현 함수형 컴포넌트 함수 문법을 이용해 컴포넌트 작성. 별도의 클래스 상속 없음 return문을 이용해 UI 정의 props를 사용해 상태 관리 리액트 훅을 사용해 state 관리, 라이프사이클 관리 클래스형 컴포넌트의 장단점 장점 라이프 사이클 메서드를 사용해 컴포넌트의 사이클을 관..

서론 웹 개발을 시작함과 동시에 React를 다뤘습니다. 마치 프론트엔드 개발 = React 개발 이라는 개인적인 생각 때문에 React를 왜 사용하는가에 대해 고민하는 시간을 가져보지 않았던 것 같습니다..! 웹 개발에 왜 React를 사용하는지 알아보시죠~! 왜 React 인건데? 웹 개발을 위한 프레임워크는 다양합니다. Vue.js React, Angular 등등.. 개인적으로 다른 프레임워크 대신 React를 사용하는 이유는 러닝 커브가 높지 않고 생태계가 잘 구축되어 있기 때문이라고 생각합니다! 하지만 이 것만이 React를 선택하는 이유는 아니라고 생각합니다. React의 특징 React의 특징은 다음과 같습니다. 1. Vitual DOM (가상 DOM) React는 DOM을 가상화하여 메모리..

렌더링이란? 렌더링이란 현재 props 및 상태를 기반으로 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정 이때, DOM이란 웹 사이트를 열 때 화면에 표시되는 내용을 마크업 언어인 HTML을 통해 표현하는 것 렌더링 발생 조건 컴포넌트의 상태 변경 (setState 함수 실행할 때 React 트리거 업데이트 됨) props가 변경되어도 업데이트 되지 않는 이유? props를 setState로 올바르게 업데이트하지 않았거나, props의 참조가 동일할 경우 혹은 props자체는 부모 컴포넌트가 렌더링 될 때 가져오기 때문에 부모의 렌더링이 일어나지 않으면 props가 교체되지 않음 부모 컴포넌트 랜더링 ⇒ 부모 컴포넌트가 렌더링 될 시 하위 컴포넌트는 모두 렌더링됨(리액트는 기본적으로 컴포넌트를..

안녕하세요 오늘은 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 왜 사용하는데? 서버 상태 관..

Next.js 13버전을 사용 중이였고 Next.js에서는 img 태그 대신 Next에서 제공하는 Image 컴포넌트 사용을 권장한다. Image태그를 사용하면 lazy loading 이미지 사이즈 최적화 placeholder 제공 의 장점을 가지고 있다고 한다 그러나, Image 태그를 사용할 때 사이즈 오류가 생기는 경우가 많은데 width, height 를 지정해줘도 이미지 사이즈가 지정값보다 작거나 크면 사이즈 속성이 제대로 먹히지 않는다 그렇다 보니 상위요소에 너비랑 높이를 지정해주고 objectFit과 layout={fill} 속성을 사용해주는 방식으로 해결해나가고(?) 있었는데 자꾸 Image with src "/sample/accommodation.png" has legacy prop "o..

사용법 기본적인 사용법은 먼저 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 ..