반응형 개발 프레임워크56 [React, Next.js] useEffect 정리 (마운트, 언마운트, 값 변경) useEffect Hook 정리 1. useEffect를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 2. deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다. 3. useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup함수라고 부른다. * cleanup함수는 useEffect 에 대한 뒷정리를 해주는 개념으로 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다. 마운트 시에 하는 작업들 - props 로 받은 값을 컴포넌트의 로컬 상태로 설정 - 외부 API 요청 (REST API 등) - 라이브러리 사용 (D3, Video.js 등.. 2023. 3. 18. [React, Next.js] useEffect를 사용해서 값이 변경될 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 값이 변경될 때 제어코드 React 값이 변경될 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent(data) { useEffect(() => { // 렌더링 이후 실행할 코드 console.log('data 값이 설정'); return () => { // 컴포넌트가 사라질 때 실행되는 코드 console.log('data 값이 설정 전'); } }, [data]); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 1. 처음에 페이지가 렌더링 됐을 때 L4의 콘솔이 찍힌다. 2. props로 받은 data값이 변경될 때 L4의 콘솔이 찍힌다. 3. data값이 변경되기 직전에 L7의 콘.. 2023. 3. 17. [React, Next.js] useEffect를 사용해서 컴포넌트가 사라질 때 코드실행 [React, Next.js] useEffect라는 Hook을 사용해서 컴포넌트가 사라질 때 제어코드 React 구성 요소가 사라질 때, 일부 코드를 실행해야 할때 사용하는 코드 function HookComponent() { useEffect(() => { return () => { // 컴포넌트가 사라질 때 실행되는 코드 } }, []); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 컴포넌트가 사라질 때(컴포넌트가 언마운트 될 때) L4주석부분의 코드가 실행된다. 2023. 3. 17. [React, Next.js] useEffect라는 Hook을 사용해서 렌더링 후 코드실행 [React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드 React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다. function HookComponent() { useEffect(() => { // 렌더링 이후 실행할 코드 }); return ( 컴포넌트 HTML 구성부 ); } 위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다. useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.. 2023. 3. 17. [Next.js] Error: There was an error while hydrating this Suspense boundary. Switched to client rendering Next.js 13에서 Error: There was an error while hydrating this Suspense boundary. Switched to client rendering - 웹 사이트내에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error - 콘솔창에서 useEffect, useState를 사용하는 페이지에서 출력되는 Error 서버 HTML이 에 를 포함할 것으로 예상하지 않는다고 Error가 명시되고 있다. Error: There was an error while hydrating this Suspense boundary. Switched to client rendering가 발생할 때 일반적으로 이 문제는 사전 렌더링과 브라우저 간에 다를 수 있는 .. 2023. 3. 6. [Next.js] 개발환경 구축 및 Next.js 13으로 업데이트 [Next.js] 개발환경 구축 명령어 및 Next.js 13으로 업데이트 명령어 Next.js 시작 $ npx create-next-app@latest $ yarn create next-app $ pnpm create next-app 위 3개 명령어 중 하나로 설치 TypeScript 프로젝트로 시작하려면 --typescript 플래그를 사용할 수 있다. $ npx create-next-app@latest --typescript $ yarn create next-app --typescript $ pnpm create next-app --typescript 위 3개 명령어 중 하나로 설치 react 및 react-dom 프로젝트에서 다음을 설치 $ npm install next react react-do.. 2023. 3. 4. [NestJS] @ValidationNested로 하위 연관 dto 검증하기 1. ValidationPipe = @Type, 2. 하위 연관 dto 검증 = @ValidateNested 아래 코드의 문제점 export class UserInfo { @ApiProperty({ type: Date }) @IsDateString() @IsOptional() @prop() playTime?: Date; @prop({ type: () => userStrongInfo }) @ApiProperty({ type: () => userStrongInfo }) @IsDefined() @Type(() => userStrongInfo) public userPower: userStrongInfo; @prop({ type: () => userBaseInfo }) @ApiProperty({ descripti.. 2023. 3. 4. [Typegoose] 하위 개체의 _id를 없애는 방법, @prop({ _id: false}) Typegoose에서 하위 개체의 _id를 없애는 방법은 @prop({ _id: false})이다. 예시 클래스의 구성은 다음과 같다.export class UserInfo { @ApiProperty({ type: Date }) @IsDateString() @IsOptional() @prop() playTime?: Date; @prop({ type: () => userStrongInfo, _id: false }) @ApiProperty() @IsDefined() @Type(() => userStrongInfo) public userPower: userStrongInfo; @prop({ type: () => userBaseInfo, _id: false }) @ApiProperty({ .. 2023. 3. 3. [Mongoose] strictQuery란? (Strict, Implicit $in) strictQuery, Strict와 차이점, strictQuery 옵션 종류, Implicit $in strictQuery란?Mongoose는 쿼리 필터에 대한 strict 모드를 피하기 위해 별도의 strictQuery 옵션을 지원한다.빈 쿼리 필터로 인해 Mongoose가 모델의 모든 문서를 반환하여 문제가 발생할 수 있기 때문이다.const mySchema = new Schema({ field: Number }, { strict: true });const MyModel = mongoose.model('Test', mySchema);MyModel.find({ notInSchema: 1 });문제점: Mongoose는 'strict: true' 때문에 'notInSchema: 1'을 필터링합니다. .. 2023. 3. 2. [Mongoose] Model.events, Model관련 Error 처리 [Mongoose] Model.events, Model관련 NestJS Error 처리 및 try.. catch문클린코드 Model.events 1. 발생한 오류를 보고하는 이벤트 이미터. 전역 오류 처리에 유용하다. 2. Model 관련 Method를 처리할 때 따로 try.. catch문을 사용하지 않아도 된다. 예시코드) MyModel.events.on('error', err => console.log(err.message)); await MyModel.findOne({ _id: 'Not a valid ObjectId' }).catch(noop); 출력값 Cast to ObjectId failed for value "Not a valid ObjectId" (type string) at path "_.. 2023. 3. 1. 이전 1 2 3 4 5 6 다음 반응형
