[react] JSX에서 Custom 훅 만들기

26 Dec 2023

react

JSX란?
Custom 훅이란?
Custom 훅 만들기
Custom 훅 사용하기
요약

1. JSX란?

JSX는 JavaScript XML의 약자로, JavaScript에서 UI를 만들기 위한 문법 확장입니다. 리액트에서는 JSX를 사용하여 컴포넌트의 렌더링을 구현합니다. JSX는 HTML과 닮았지만 JavaScript 표현식도 포함할 수 있어 동적인 UI를 쉽게 구현할 수 있습니다.

2. Custom 훅이란?

Custom 훅은 리액트에서 로직을 재사용하기 위한 강력한 도구입니다. 기존의 훅들을 조합하여 새로운 동작을 정의할 수 있으며, 코드의 가독성과 재사용성을 높이는 데에 도움을 줍니다.

3. Custom 훅 만들기

다음은 useWindowWidth라는 Custom 훅을 만드는 예제입니다.

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowWidth;
}

export default useWindowWidth;

위 예제는 현재 창의 너비를 감지하여 상태로 저장하는 useWindowWidth 훅을 보여줍니다.

4. Custom 훅 사용하기

만들어진 Custom 훅은 다음과 같이 사용할 수 있습니다.

import React from 'react';
import useWindowWidth from './useWindowWidth';

function MyComponent() {
  const windowWidth = useWindowWidth();

  return <p>Current window width: {windowWidth}</p>;
}

export default MyComponent;

useWindowWidth 훅을 MyComponent 안에서 호출하여 현재 창의 너비를 표시하고 있습니다.

5. 요약

JSX를 사용하여 컴포넌트를 렌더링하고, Custom 훅을 활용하여 로직을 재사용하는 방법에 대해 알아보았습니다. Custom 훅은 리액트 애플리케이션의 코드를 간결하고 읽기 쉽게 만들어줍니다.