useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다

내용과 상관없는 썸네일

useImperativeHandle

useImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트의 특정 기능만 노출하도록 할 수 있다.

 

일반적으로 React에서 부모 컴포넌트가 자식 컴포넌트의 내부 동작을 직접 제어하는 것은 권장되지 않는다. 하지만 특정 상황에서는 필요할 수 있다. 예를 들어, input 요소의 focus 메서드를 부모에서 호출하거나, 특정 컴포넌트의 메서드를 외부에서 실행할 필요가 있을 때 useImperativeHandle을 사용할 수 있다.

 

이 Hook은 forwardRef와 함께 사용되며, useImperativeHandle(ref, createHandle, [deps]) 형태로 작성된다. createHandle 함수에서 객체를 반환하여, 부모에서 사용할 수 있는 메서드를 정의할 수 있다.

 

//Modal.tsx
  //모달 컴포넌트의 함수들을 정의
  useImperativeHandle(ref, () => ({
    close: () => {
      setIsOpen(false);
    },
    open: (data: T) => {
      setIsOpen(true);
      setData(data);
    },
  }));

이 코드는 부모 컴포넌트에 close와 open 메서드를 노출하기 위해 useImperativeHandle이 쓰였다.

 

 

 

정리

• useImperativeHandle은 부모 컴포넌트가 자식 컴포넌트의 특정 기능을 제어할 수 있도록 해준다.
• forwardRef와 함께 사용해야 한다.
• 내부적으로 ref를 통해 노출할 메서드를 선택적으로 제한할 수 있다.

 

 

createPortal

createPortal은 React에서 컴포넌트의 렌더링 위치를 변경할 수 있도록 도와주는 API이다. 이를 사용하면 특정 컴포넌트를 부모 컴포넌트의 DOM 계층이 아니라, 원하는 DOM 노드에 렌더링할 수 있다.

 

기본적으로 React에서의 컴포넌트는 부모 컴포넌트의 DOM 구조 내에서 렌더링된다. 하지만 모달, 툴팁, 드롭다운 같은 UI 요소는 특정한 DOM 위치에 렌더링하여 현재 UI 위에 겹치게 두는 것이 더 적절하다. 따라서 createPortal을 사용하면 이런 요소들을 원하는 DOM 노드에 직접 렌더링할 수 있다.

 

ReactDOM.createPortal(child, container) 형태로 사용하며, child는 렌더링할 요소이고, container는 해당 요소를 렌더링할 DOM 노드이다.

 

//Modal.tsx
return createPortal(
  <div className="fixed inset-0 flex items-center justify-center z-50">
    <div className="absolute inset-0 bg-black opacity-40" />
    <div className="bg-white p-4 rounded-md relative z-10">{data && children(data)}</div>
  </div>,
  document.body
);

 

• createPortal을 사용하면 부모 컴포넌트의 DOM 계층을 벗어나 원하는 DOM 노드에 렌더링할 수 있다.
• 주로 모달, 툴팁, 드롭다운 같은 UI 요소에 사용된다.
• ReactDOM.createPortal(child, container) 형태로 사용한다.

 

 

forwardRef

forwardRef는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소나 특정 메서드에 직접 접근할 수 있도록 하는 함수이다. 보통 useRef와 함께 사용되며, 자식 컴포넌트가 ref를 통해 자신의 내부 요소를 부모에게 노출할 수 있도록 만든다.

 

React에서는 일반적으로 부모가 자식의 DOM 요소에 직접 접근하지 않고 props를 통해 데이터를 전달하는 것이 권장된다. 하지만 특정한 상황에서는 부모가 자식의 DOM 요소에 접근해야 할 필요가 있다. 예를 들어, 부모에서 특정 input 요소에 focus()를 호출하거나, 특정 동작을 수행해야 할 때 forwardRef를 사용할 수 있다.

 

forwardRef는 고차 컴포넌트(HOC) 형태로 동작하며, forwardRef((props, ref) => { ... }) 형태로 작성된다. 이를 통해 부모 컴포넌트가 ref를 사용해 자식 컴포넌트의 특정 요소에 접근할 수 있다.

 

//Modal.tsx
const Modal = forwardRef<ModalRef<any>, Props<any>>(({ children }, ref) => {
  const [isOpen, setIsOpen] = useState(false);
  const[data, setData] = useState<T>();
  
  //... 다른 컴포넌트

 

 

• forwardRef는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소나 특정 메서드에 접근할 수 있도록 한다.
• useRef와 함께 사용하여 직접적인 DOM 조작을 가능하게 한다.
• useImperativeHandle과 함께 사용하면 더욱 세밀한 컨트롤이 가능하다.

 

 

serverAction

Server Action은 React Server Components(RSC)에서 서버에서 직접 실행되는 함수로, 클라이언트에서 서버로 데이터를 전송하고, 데이터를 업데이트하거나, 외부 API를 호출하는 등의 작업을 수행할 수 있도록 한다. Next.js 14부터 지원되며, 기존 API 라우트 없이도 서버에서 데이터를 처리할 수 있다.

 

기존의 클라이언트-서버 통신 방식에서는 클라이언트에서 API를 호출하고, 서버에서 이를 처리한 후 다시 응답을 반환하는 방식으로 동작했다. 하지만 Server Action을 사용하면 클라이언트에서 직접 서버 함수를 호출할 수 있으며, API 엔드포인트 없이도 데이터를 조작할 수 있다.

Server Action의 핵심 개념은 다음과 같다:

• use server 디렉티브를 사용하여 서버에서 실행되는 함수를 정의한다.
• 클라이언트 컴포넌트에서도 직접 서버 함수를 호출할 수 있다.
• API 라우트 없이 서버에서 데이터베이스, 파일 시스템, 외부 API를 처리할 수 있다.
• 클라이언트에서 실행될 수 없으며, 반드시 서버에서 실행되어야 한다.

//getData.tsx
"use server"; //자동으로 API를 만들어준다 | Server Actio

const getData = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();
  console.info("서버에서 실행됨");
  return data;
};


export {getData};

 

 

• Server Action은 API 라우트 없이 서버에서 직접 실행되는 함수이다.
• use server 디렉티브를 사용하여 서버 함수임을 명시해야 한다.
• 클라이언트 컴포넌트에서 직접 호출할 수 있다.
• 데이터베이스 저장, 외부 API 호출 등의 작업을 수행하는 데 적합하다.
• 기존 API 라우트를 줄일 수 있어 코드의 복잡도를 낮출 수 있다.

 

 

 

middleWare

Middleware는 요청(Request)과 응답(Response) 사이에서 실행되는 코드로, 요청을 처리하기 전에 미리 특정 작업을 수행할 수 있도록 한다. Next.js에서 Middleware를 사용하면 인증, 로깅, 리디렉션 등의 작업을 중앙에서 처리할 수 있다.

 

Next.js에서는 middleware.ts 또는 middleware.js 파일을 생성하여 Middleware를 설정할 수 있다

 

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";


export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL("/", request.url));//요청받으면 홈으로 리다이렉트
}

export const config = {
  matcher: "/about/:path*", // "/about" 및 그 하위 모든 경로(예: "/about/team", "/about/contact" 등)에 매칭
  //넥스트 route, about에 아무 권한 없는 애가 들어오면 홈으로 보내버림
  //공통적인 로직을 여기서 처리함, 서버 관련된 코드만 쓸 수 있다.
};

 

 

• Middleware는 요청과 응답 사이에서 실행되는 함수이다.
• 인증, 로깅, 리디렉션 등의 작업을 수행할 수 있다.
• Next.js에서는 middleware.ts 파일을 사용하여 설정할 수 있다.
• NextResponse.redirect()를 활용하면 특정 경로로 사용자를 이동시킬 수 있다.
• matcher 옵션을 사용하면 특정 경로에만 Middleware를 적용할 수 있다.

 

 

 

읽어주셔서 감사합니다~