anko와 함께하는 developer :D

커스텀 훅(custom hook)

앙꼬오빠 — Mon, 1 Jul 2024 09:30:33 +0900

커스텀 훅은 use 라는 이름을 접두사로 사용해줘야하고

일반 컴포넌트처럼 동일하게 useState, useEffect, useCallback, useMemo 등 다 사용 가능

(아니 use hook 들이 들어가야만 커스텀 훅이라고 할 수 있다, use hook들을 사용하지도 않았는데 커스텀 훅이라고 정해놓고 use라는 접두사를 붙여서는 안된다)

“use” 접두사에 대한 리액트 문서

useEffect()

앙꼬오빠 — Fri, 28 Jun 2024 10:53:19 +0900

useEffect 의 작동 원리

import React, { useEffect, useRef } from "react";

const useClick = (onClick) => {
  const ref = useRef();
  useEffect(() => {
  	// 1. 컴포넌트가 마운트되었을 때 실행되는 코드
    const element = ref;

    if (element.current) {
      element.current.addEventListener("click", onClick);
    }


    return () => {
    // 2. 컴포넌트가 언마운트되기 전에 실행되는 코드
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []); // 3. 빈 배열은 컴포넌트가 마운트될 떄 한 번만 실행

  if (typeof onClick !== "function") {
    return;
  }
  return ref;
};

export default useClick;

1. 마운트(Mount)

Component의 Mount는 React Component가 DOM에 추가되고 화면에 나타나는 과정을 말한다.

Component가 처음 생성되고 DOM에 삽입될 때를 Mount라고 한다.

2. 언마운트(unMount)

Component의 unMount는 React Component가 DOM에서 제거되는 과정을 말한다.

3. 의존성 배열 Dependency(deps)

빈 배열 값으로 둘 경우에는 Component가 Mount될 때 한 번만 실행된다.

배열에 값이 있는 경우 해당 상태 값이 변경될 때마다 useeEffect()의 함수가 실행되고, 변경될 때만 실행되는 것이 아니라 처음 Mount 될 때도 실행된다.

의존성 배열 자체를 생략한 경우 리렌더링될 때마다 실행된다.

여기서 unMount 될 때 eventListener를 제거하는 이유는 무엇일까?

1. 메모리 정리

2. 성능 최적화

eventListener는 DOM 요소에 대한 참조를 가지고 있다.

Component가 unMount가 됐음에도 불구하고 eventListener가 남아있다면 해당 Component가 더 이상 필요하지 않더라도 메모리에서 해제되지 않을 수 있다.

불필요한 메모리가 발생하고, 성능적으로 문제가 될 수있다.

useEffect 훅에서 반환(return)하는 함수는 Component가 unMount되기 전에 실행되는 clean-up 함수다.

Axios 사용하기

앙꼬오빠 — Wed, 12 Jun 2024 14:38:33 +0900

GET: 데이터 조회 axios.get(url)

POST: 데이터 등록 axios.post(url, data)

PUT: 데이터 수정 axios.put(url/id 값, data)

DELETE: 데이터 제거 axios.delete(url/id 값)

TEST API JS

import axios from "axios";

export default class Memo {
  constructor() {
    this.apiClient = axios.create({
      baseURL: "http://localhost:3001",
    });
  }

  async getMemos() {
    try {
      const response = await this.apiClient.get("memo");
      const data = await response.data;
      return data;
    } catch (error) {
      console.log("memo error message", error);
    }
  }

  async createMemo(memo) {
    return await this.apiClient.post("memo", memo);
  }

  async deleteMemo(id) {
    return await this.apiClient.delete(`memo/${id}`);
  }

  async updateMemo(memo, id) {
    return await this.apiClient.put(`memo/${id}`, memo);
  }
}

TEST API JSON

{
  "memo": [
    {
      "id": "5c151155-3217-4d12-8523-880a853698e8",
      "title": "제목1",
      "body": "내용1"
    },
    {
      "id": "12d3629f-ecc6-4547-bc32-482220458d52",
      "title": "제목2",
      "body": "내용2"
    },
    {
      "id": "767f607d-e528-4c7f-81cc-e47560179438",
      "title": "제목3",
      "body": "내용3"
    }
  ]
}

Next.js에서의 fetch api

앙꼬오빠 — Sun, 5 May 2024 18:50:29 +0900

next js는 기본 웹 fetch() API를 확장하여 서버의 각 요청이 자체 영구 캐싱 의미를 설정할 수 있도록 한다.

server component에서 next js가 내가 fetch 한 것을 기억하기 때문이다.

useFormStatus()

앙꼬오빠 — Mon, 22 Apr 2024 14:46:14 +0900

useFormStatus()

이 hook은 자신의 부모 components를 보고, 가장 가까운 form을 찾으려고 한다.

그렇기 때문에 useFormStatus는 form이 작성된 components에서는 사용할 수 없다.

쉽게 말해 form 이 작성된 components가 아니라 useFormStatus hook을 사용할 자식 요소 안에서 사용해야 한다.

가장 가까운 부모 form을 찾아서 그 부모 form의 상태를 알려준다.

form이 pending인지 아닌지 알려주므로 유용하다 (disabled에 pending 값을 넣음)

//부모 component


export default function Login() {
  return (
  	<form action={action}>
      <FormButton text="Login" />
    </form>
  );
}

//자식 component

"use client";

import { useFormStatus } from "react-dom";

interface Props {
  text: string;
}

export default function FormButton({ text }: Props) {
  const { pending } = useFormStatus();
  return (
    <button
      disabled={pending}
    >
      {pending ? "Loading..." : text}
    </button>
  );
}

컴포넌트가 리렌더링 되는 시점은?

앙꼬오빠 — Tue, 30 Jan 2024 10:54:16 +0900

리액트에서 함수형 컴포넌트는 랜더링 -> 컴포넌트 함수 호출 -> 모든 내부 변수 초기화의 순서를 거친다.

컴포넌트가 리랜더링되는 시점은

1. state가 변경 되었을 때

2. 상속받은 props가 변경 되었을 때

3. 부모 컴포넌트가 리렌더링 된 경우 해당 자식 컴포넌트는 모두 리렌더링 된다

CSR, SSG, ISR, SSR 차이점 정리

앙꼬오빠 — Fri, 5 Jan 2024 12:17:34 +0900

Client Side Rendering

렌더링하는 주체자가 클라이언트(브라우저)

장점?

한번 로딩되면, 빠른 UX 제공

서버의 부하가 작음

문제점?

페이지 로딩 시간(TTV)이 길다

자바스크립트 활성화 필수임

SEO 최적화가 힘듬

보안에 취약함

CDN에 캐시가 안됨

*TTV(time to view)

Static Site Generation

렌더링 하는 주체자가 서버,

언제 렌더링 하냐? 빌드할때 렌더링

장점?

페이지 로딩 시간(TTV: time to view)이 빠름

자바스크립트 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

CDN에 캐시가 됨

문제점?

데이터가 정적임(데이터가 가변적으로 바뀌는 웹사이트라면 맞지 않다)

사용자별 정보 제공이 어려움

=> 이런 문제점을 해결하기 위해 나온게 ISR, SSR

Server Side Rendering

렌더링하는 주체자가 서버,

언제 렌더링 하냐? 요청시 렌더링

장점?

페이지 로딩 시간이 빠름

자바스크립트가 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

실시간 데이터를 사용

사용자별 필요한 데이터를 사용함

문제점?

SSG, ISR 보다 비교적 느릴 수 있음

서버의 과부하가 걸릴 수 있음

Incremental Static Regeneration

렌더링 하는 주체자가 서버,

언제 렌더링 하냐? 주기적으로 렌더링

SSG와 동일한 원리.

단, 정해진 주기에 따라 페이지를 다시 생성함

장점?

페이지 로딩 시간(TTV: time to view)이 빠름

자바스크립트 필요 없음

SEO 최적화가 좋음

보안이 뛰어남

CDN에 캐시가 됨

데이터가 주기적으로 업데이트 됨

문제점?

실시간 데이터가 아님

사용자별 정보 제공의 어려움

=> 이런 문제점을 해결하기 위해 나온게 SSR

Compound 패턴

앙꼬오빠 — Thu, 14 Dec 2023 12:57:19 +0900

컴파운드 컴포넌트 패턴은 여러 컴포넌트들이 모여 하나의 동작을 할 수 있게 해준다.

디자인시스템을 만들기 위해 래퍼런스를 찾는 중, Bootstrap이 해당 패턴을 사용하여 컴포넌트를 만들고 있었다.

장점: 컴파운드 패턴은 동작 구현에 필요한 상태를 내부적으로 가지고 있는데 이것을 사용하는 쪽에서는 드러나지 않아 걱정 없이 사용할 수 있다. 또 이 패턴을 사용하면 자식 컴포넌트들을 일일히 import할 필요 없이 기능을 사용할 수 있다.

Context API 를 활용해서 컴파운드 패턴을 구현했고,

사용자가 토글 버튼을 눌렀을 때 나타날 메뉴를 렌더링하는 컴포넌트를 만들어 보았다.

Toggle, List, Item 컴포넌트가 FlyOutContext Provider에 접근할 수 있도록 해당 컴포넌트는 FlyOut의 자식 컴포넌트로 렌더링해야 한다. Static property로 만들어 줬다.

import React, { useState } from 'react';
import { createContext, useContext } from 'react';

// Context Create
const FlyOutContext = createContext();

// Provider
export function FlyOut({ children }) {
  const [open, setOpen] = useState(false);
  const toggle = () => {
    setOpen((prev) => !prev);
  };
  const providerValue = { open, toggle };
  return (
    <FlyOutContext.Provider value={providerValue}>
      {children}
    </FlyOutContext.Provider>
  );
}

// Children Component
function Toggle() {
  const { open, toggle } = useContext(FlyOutContext);

  return (
    <div
      className="absolute p-[10px] h-[50px] border bg-black"
      onClick={() => toggle(!open)}
    >
      토글
    </div>
  );
}

function List({ children }) {
  const { open } = useContext(FlyOutContext);

  return (
    open && (
      <ul className="absolute top-[50px] bg-[skyblue] px-[10px]">{children}</ul>
    )
  );
}

function Item({ children }) {
  return <li>{children}</li>;
}

// Toggle 컴포넌트가 FlyOutContext 프로바이더에 접근할 수 있도록 해당 컴포넌트는 FlyOut의 자식 컴포넌트로 렌더링 해야한다.
FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

아래와 같이 FlyOut 컴포넌트만 import 해줘도 Toggle, List, Item 컴포넌트 등을 사용할 수 있게 된다.

import React from 'react';
import { useNavigate } from 'react-router-dom';
import classNames from 'classnames';
import formatAgo from '../../util/date';
import styles from './VideoCard.module.scss';
import { FlyOut } from '../FlyOut/FlyOut';

export default function VideoCard({ video, type, ...rest }) {
  const { title, channelTitle, publishedAt, thumbnails } = video.snippet;
  const navigate = useNavigate();
  const isList = type === 'list';
  return (
    <li
      className={isList ? 'flex gap-1 m-2' : 'relative'}
      onClick={() => {
        navigate(`/videos/watch/${video.id}`, { state: { video } });
      }}
    >
      <FlyOut>
        <FlyOut.Toggle />
        <FlyOut.List>
          <FlyOut.Item>수정</FlyOut.Item>
          <FlyOut.Item>삭제</FlyOut.Item>
        </FlyOut.List>
      </FlyOut>

      <img
        className={isList ? 'w-60 mr-2' : 'w-full'}
        src={thumbnails.medium.url}
        alt={title}
      />

      <div className={styles.content}>
        <h3 className={classNames(styles.title, 'line-clamp-3')}>{title}</h3>
        <p className={styles.channel}>{channelTitle}</p>
        <p className={styles.publishedAt}>{formatAgo(publishedAt, 'ko')}</p>
      </div>
    </li>
  );
}

결과)

react-router-dom

앙꼬오빠 — Tue, 5 Dec 2023 12:41:32 +0900

react-router에서 자주 사용했던 함수들을 정리,

useParams()

path: '/videos/:keyword '

path 값의 페이지에서 param 값을 가져올 수 있다.

import { useParams } from "react-router-dom";
const { keyword } = useParams();

useNavigate()

onclick={() => navigate(`/videos/watch/${video.id}`)}

window.location 과 vue의 router.push 로 생각해주면 되겠다.

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

useLocation()

onClick={() => navigate(`/videos/watch/${video.id}`, { state: { video } }) }

useNavigate로 페이지가 랜딩 됐을 때 넘겨준 이전 페이지에서 값을 받아올 수 있다.

navigate의 두번째 인자 값에 { state: { key: value } } 로 넘겨주면 된다.

위에서는 key, value 값을 동일하게 전달했었기 때문에 축약해서 전달이 가능했다.

전달 받은 페이지에서 useLocation 으로 값을 받아올 수 있다.

import { useLocation } from "react-router-dom";
const {
  state: { video },
} = useLocation();

챌린지를 시작하다.

앙꼬오빠 — Mon, 4 Dec 2023 12:12:00 +0900

원티드 프리온보딩 프론트엔드 챌린지

비즈니스 로직 완전 정복 with React

프론트엔드 챌린지는 노션에 기록하려고 합니다 :D