서비스 로직

코드 작성

value 값 변경 시 확인용 코드

useEffect(() => {
  console.log('check values :: ', values);
}, [values]);

Redux

기본 state 변경 틀

import { useDispatch } from 'react-redux';
import { setUser } from 'store/userSlice';

...

const Login = () => {
  const handleSubmit = async (e) => {
		
		...
		
    try {
      const res = await axios.post('/api/member/login', values);
      const token = res.headers['authorization'];

      if (token) {
	      // 값 세팅
        dispatch(setUser({
          token: token.split(' ')[1]
        }));
        alert('로그인되었습니다.');
        resetForm();
        navigate('/');
      } else {
        alert('로그인 중 오류가 발생했습니다. 다시 시도 해 주세요.');
      }
    } catch (error) {
      console.error('로그인 실패:', error);
      const errorMessage = error.response?.data?.message || '로그인 중 오류가 발생했습니다.';
      alert(errorMessage);
    }
  };
}

값 가져오기

import { useSelector } from 'react-redux';
import { selectToken } from 'store/memberSlice';

...

const Home = () => {
		// memberSlice 에 select 로 함수를 export 경우
	  const token = useSelector(selectToken);
	  // 선언하지 않은 경우
	  const token = useSelector(state => state.member?.token);
}

Axios

API 기본 호출 틀

const handleSubmit = async (e) => {
	// 이벤트 중복실행 방지
  e.preventDefault();
  // submit 전 내용 체크
  console.log('check values before submit :: ', values);
  // validation 체크
  if (!values) {
	  alert('확인해주세요');
  }
  
  try {
	  // 1. axios 로 api 호출
    const res = await axios.post('/api/signup', values);
    // 2. api 호출 이후의 로직 작성
    console.log('회원가입 성공:', res.data);
    navigate('/login');
  } catch (error) {
	  // 3. 에러 발생 시 메세지 노출
    console.error('회원가입 실패:', error);
    const errorMessage = error.res?.data?.message || '회원가입 중 오류가 발생했습니다.';
    alert(errorMessage);
  }
};

Hooks

useFormInput

입력 시 입력값을 자동으로 객체에 반영하는 hook

import { useState } from 'react';

const useFormInput = (initialValues) => {
  const [values, setValues] = useState(initialValues);

  const handleChange = (event) => {
    const { name, value, type, checked } = event.target;
    setValues({
      ...values,
      [name]: type === 'checkbox' ? checked : value,
    });
  };

  const resetForm = () => setValues(initialValues);

  return { values, handleChange, resetForm, setValues };
};

export default useFormInput;

const Login = () => {
	// useFormInput 에서 사용할 함수 정의
  const { values, handleChange, resetForm, setValues } = useFormInput({
    nickname: '',
    password: '',
    email: ''
  });
  
  // 변경할 values 선언
  const { nickname, password, email } = values; // 비구조화 할당
  
  // setValues: value 할당
  const login = async () => {
	  const res = await axios.post(`/api/member/login`);
	  console.log("res :: ", res);
	  setValues(res.data);
  }
  
  // resetForm: values 초기화
  const resetValues = () => {
	  resetForm()
  }
  
  // handleChange: 입력값이 변경 될 때마다 values 객체 내 값 변경
	return (
		<input
			type="text"
			name="postTitle"
			value={postTitle}
			onChange={handleChange}
		/>
  );
}