React 개발자를 위한 TypeScript와 Hooks 사용 팁 및 예제

리액트

 

 

 

 

🤷‍♂️ 리액트와 타입스크립트 조합

---

React와 Typescript는 강력한 조합으로 코드 베이스를 더욱 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.

하지만 입문자 분들께서는 React hook에 Typescript를 정의하는 게 불편하고 까다로울 수도 있습니다.

 

이 글을 통해서 useState, useEffect, useContext, useRef 그리고 Custom Hook에서 Typescript를 정의하는 방법을 자세히 알아보겠습니다.

 

React Hook 사용개념보다는 TypeScript를 정의하고 사용하는 방법에 대해서 자세히 다루고 있습니다.

 

 

 

2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법

리액트 useLayoutEffect 개념및 사용법

 

2024.08.02 - [React] - 리액트 제어 vs 비제어 컴포넌트 알아보기

리액트 제어 vs 비제어 컴포넌트 알아보기

🤷‍♂️ React Hooks와 Typescript 실전 예제

---

 

useState와 TypeScript

useState는 컴포넌트의 상태를 관리하는 가장 기본적인 Hook입니다.

TypeScript를 사용하여 상태의 타입을 명시적으로 지정할 수 있습니다.

 

기본 예제

useState를 사용할 때 타입을 명시적으로 지정하면 상태의 타입 안정성을 보장할 수 있습니다.

예를 들어, 숫자 상태를 관리할 때는 다음과 같이 작성합니다

import React, { useState } from 'react';

const CounterComponent: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default CounterComponent;

 

문자열 상태 관리

문자열 상태를 관리할 때도 타입을 명시적으로 지정할 수 있습니다

import React, { useState } from 'react';

const TextComponent: React.FC = () => {
  const [text, setText] = useState<string>('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>{text}</p>
    </div>
  );
};

export default TextComponent;

 

객체 상태 관리

복잡한 객체 상태를 관리할 때는 인터페이스를 정의하여 타입을 명시할 수 있습니다

import React, { useState } from 'react';

interface User {
  name: string;
  age: number;
}

const UserComponent: React.FC = () => {
  const [user, setUser] = useState<User>({ name: 'John', age: 30 });

  return (
    <div>
      <p>User: {user.name}, Age: {user.age}</p>
      <button onClick={() => setUser({ ...user, age: user.age + 1 })}>Increase Age</button>
    </div>
  );
};

export default UserComponent;

 

useEffect와 TypeScript

useEffect는 부수 효과(사이드 이펙트)를 처리하는 데 사용됩니다.

예를 들어, 데이터 가져오기, 구독 설정, 수동으로 DOM 변경 등을 처리합니다.

 

첫 렌더링에 데이터 가져오기 예제

데이터를 가져올 때 useEffect를 사용하면 컴포넌트가 마운트 될 때 데이터를 가져오고, 언마운트될 때 정리 작업을 수행할 수 있습니다

import React, { useEffect, useState } from 'react';

const DataFetchingComponent: React.FC = () => {
  const [data, setData] = useState<string | null>(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));

    return () => {
      console.log('Cleanup on unmount');
    };
  }, []); // 빈 배열은 컴포넌트가 마운트될 때 한 번만 실행

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
};

export default DataFetchingComponent;

 

useContext와 TypeScript

useContext는 Context API를 사용하여 전역 상태를 관리하는 데 사용됩니다.

Context를 사용하면 여러 컴포넌트에서 상태를 공유할 수 있습니다.

 

예제

전역 상태를 관리하기 위해 Context를 생성하고, 이를 Provider와 Consumer를 통해 사용할 수 있습니다

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

// 사용자 인터페이스 정의
interface User {
  name: string;
  age: number;
}

// Context 생성
const UserContext = createContext<User | null>(null);

const UserProvider: React.FC = ({ children }) => {
  const [user, setUser] = useState<User>({ name: 'John', age: 30 });

  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

const UserProfile: React.FC = () => {
  const user = useContext(UserContext);

  return (
    <div>
      {user ? <p>{user.name}, {user.age}</p> : <p>No user data</p>}
    </div>
  );
};

const App: React.FC = () => (
  <UserProvider>
    <UserProfile />
  </UserProvider>
);

export default App;

 

useRef와 TypeScript

useRef는 DOM 요소나 다른 값을 참조하는 데 사용됩니다.

주로 포커스 설정이나 다른 DOM 조작을 위해 사용됩니다.

 

예제

useRef를 사용하여 입력 요소에 포커스를 설정할 수 있습니다

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

const FocusInputComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return <input ref={inputRef} type="text" />;
};

export default FocusInputComponent;

 

Custom Hook과 TypeScript

Custom Hook을 사용하면 재사용 가능한 로직을 분리할 수 있습니다.

Custom Hook은 일반 함수처럼 동작하며, 다른 Hook을 내부에서 호출할 수 있습니다.

 

예제

다음 예제에서는 데이터를 가져오는 Custom Hook을 정의하고, 이를 컴포넌트에서 사용하는 방법을 보여줍니다

import { useState, useEffect } from 'react';

const useFetch = <T,>(url: string): { data: T | null; loading: boolean } => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

// 사용 예제
import React from 'react';

interface UserData {
  id: number;
  name: string;
}

const UserFetchComponent: React.FC = () => {
  const { data, loading } = useFetch<UserData>('https://api.example.com/user');

  return (
    <div>
      {loading ? <p>Loading...</p> : data ? <p>{data.name}</p> : <p>No Data</p>}
    </div>
  );
};

export default UserFetchComponent;

 

🤷‍♂️ React 개발자를 위한 TypeScript와 Hooks 사용 팁 및 예제 마지막으로

---

리액트 훅을 타입스크립트와 함께 사용하면 코드의 타입 안전성을 높이고 유지보수성을 개선합니다.

반대로, 타입 안전성을 높이고 유지 보수성을 높이려면 타입스크립트를 잘 다뤄야 하며 많은 공부가 필요합니다.

 

이 글에서 기본적인 리액트 훅 useState, useEffect, useContext, useRef 그리고 Custom Hook에 타입스크립트를 정의하고 타입 안정성과 유지보수성을 높이는 방법에 대해서 알아봤습니다.

 

 

자바스크립트 뿌시기

https://itibiza.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%9C%EB%A6%AC%EC%A6%88-javascript-%ED%95%A8%EC%88%98-%EC%8A%A4%EC%BD%94%ED%94%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

[자바스크립트 시리즈] javascript 함수 스코프 이해하기

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리