[Next.js, React] useState, useEffect 코드 컨벤션

목차

 useState

 

상태 변수와 설정 함수의 명명

• 상태 변수와 설정 함수는 의미 있는 이름을 사용한다.
• 상태 변수는 단수형 명사, 설정 함수는 `set` 접두사를 사용한다.
• 예 `const [count, setCount] = useState(0);`

초기 값 설정

• 상태 변수의 초기 값은 올바른 타입을 사용하여 명확하게 설정한다.
• 예: `const [name, setName] = useState<string>('');`

상태 초기화 함수

• 초기 상태를 계산하는 데 복잡한 로직이 필요하면 상태 초기화 함수를 사용한다.
• 예: `const [value, setValue] = useState(() => computeInitialValue());`

상태 그룹화

• 관련된 상태 값은 객체로 그룹화하여 관리한다.

const [formState, setFormState] = useState({
  username: '',
  email: '',
});

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const { name, value } = e.target;
  setFormState((prevState) => ({
    ...prevState,
    [name]: value,
  }));
};

 

 useEffect

 

의존성 배열

• 의존성 배열은 useEffect에서 사용하는 모든 외부 값을 포함한다.
• 의존성 배열을 명확하게 작성하여 불필요한 재렌더링을 방지한다.
• 예 : `useEffect(() => { /* effect */ }, [dependency]);`

클린업 함수

• 필요한 경우 클린업 함수를 반환하여 부수 효과를 정리한다.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

 

useEffect 내 함수 정의

• useEffect 내에서 정의하는 함수는 useEffect 내부에서만 사용되는 경우에만 작성한다.
• 외부에서 정의된 함수를 사용할 때는 의존성 배열에 추가해야 한다.

useEffect(() => {
  function handleStatusChange(status: string) {
    // handle status change
  }
  
  const subscription = subscribeToStatus(handleStatusChange);
  return () => {
    subscription.unsubscribe();
  };
}, [subscribeToStatus]);

 

의미 있는 주석 추가

• 복잡한 useEffect 로직에는 주석을 추가하여 다른 개발자가 이해할 수 있도록 한다.

useEffect(() => {
  // 컴포넌트가 마운트될 때 API 호출
  fetchData();

  // 컴포넌트가 언마운트될 때 타이머 정리
  return () => {
    clearInterval(timer);
  };
}, [fetchData, timer]);

 

 최종 예시

import React, { useState, useEffect } from 'react';
import { fetchUserData } from './api';

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

const UserComponent: React.FC = () => {
  // 상태 정의
  const [userData, setUserData] = useState<UserData | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // API 호출 함수
  const loadUserData = async () => {
    try {
      const data = await fetchUserData();
      setUserData(data);
    } catch (error) {
      console.error('Failed to fetch user data:', error);
    } finally {
      setLoading(false);
    }
  };

  // useEffect로 데이터 로드
  useEffect(() => {
    loadUserData();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : (
        userData && (
          <div>
            <h1>{userData.name}</h1>
            <p>{userData.email}</p>
          </div>
        )
      )}
    </div>
  );
};

export default UserComponent;