DiaryProject(React) - 회원가입 폼(4) - 코드 개선, DB연결, React Router

주요 변경사항

1. useRef > useState 적용
2. axios post를 사용하여 DB에 data 전달
3. react router를 사용한 컴포넌트간 페이지 이동

useRef > useState 적용

개선점

• 불필요한 렌더링을 방지하려고 주요 변수를 useRef로 관리하려고 했으나, 본래의 용도와 다르게 쓰이는 것 같아 useState로 재변경
  • useRef : 화면에 영향을 주지 않는 요소, React의 virtual DOM에 접근하는 용도로 사용
  • useState : React의 주요 데이터를 제어하기 위한 장치, 화면에서 바뀌는 대부분의 것을 state로 관리해야 한다.

기존 코드
  const [userData, setUserData] = useState([]);
  const emailValue = useRef();
  const nameValue = useRef();
  const passwordValue = useRef();
  const pwCheckValue = useRef();```

 수정 코드 
  const [emailAlert, setEmailAlert] = useState('');
  const [passwordAlert, setPasswordAlert] = useState('');
  const [pwCheckAlert, setPwCheckAlert] = useState('');
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

axios post 적용한 서버 통신

개선점

• 유저가 회원가입 폼을 작성하면 백엔드에서 구현해놓은 DB에 회원가입 정보를 전달.

async function getPost() {
    try {
      const response = await axios.post('url', {
        user_id: name,
        user_password: password,
      });
      console.log(response);
    } catch (error) {
      console.err(error);
    }
  }

추가 개선하고 싶은 것

• 정상적으로 회원가입 처리된 경우, 라우팅을 이용해서 자동으로 로그인 페이지 이동.

발생했던 문제들

1. errorCode 404
- 회원정보를 처리해서 모아놓은 info DB / 회원가입 데이터가 전달되는 DB가 따로 있었는데 회원 정보는 정상적으로 get되나, 회원가입 데이터 db는 post가 되지 않고 404 에러가 발생하였다. 이때 3가지 의심을 해볼 수 있다. 1) 서버에서 리퀘스트를 받았을 때 리턴값을 설정해놓지 않았거나, 2) 서버를 post로 설정해놓지 않았거나, 3) url이 잘못됐거나. 나의 경우 3번이 해당됐다. 올바른 url로 재설정하고 실행해보니 정상작동하였음.
2. errorCode: 500
- 구글링 결과 서버문제라고 했으나, 내가 보내는 데이터 양식과 서버에서 구현해놓은 데이터 양식이 일치하지 않아 발생한 문제였음.
3. axios에 대한 이해도 부족
- 부트캠프에서 진행한 기초의 기초 문법으로만 작성하였는데, axios에는 다양한 설정 방식이 있음. 나중에 발생할 더 복잡한 서버 통신을 위해 axios를 적극적으로 이용하면서 학습해야 할 필요가 있음.

react router 페이지 이동

좋은 참고 자료

Routing??

• 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미

React router

• npm을 이용하여 module 적용 가능
• 라우터를 사용하면 페이지에서 이동이 발생했을 때 새로운 HTML을 요청해서 띄우는 것이 아니라 브라우저 API를 이용하여 브라우저의 주소값만 변경하고 렌더링한 웹 앱을 그대로 유지하면서 라우팅 설정에 따라 다른 페이지를 자연스럽게 보여줄 수 있다.

코드 
import {Route, Routes, BrowserRouter} from 'react-router-dom';
import SignUp from './component/sign.js';
import LoginRef from './component/loginRef.js';

const App = () => {
  return (
    <BrowserRouter>
      <Routes> // React Router v6부터 Routes로 작성한다.
        <Route path='/' element={<SignUp />} /> 
        // 메인페이지는 path를 /로 설정한다.
        <Route path='/loginRef.js' element={<LoginRef />} /> 
        // 서브페이지의 경로는 import할 때 지정했으므로 /파일명으로 작성한다
      </Routes>
    </BrowserRouter>
  );
};

메인 페이지
 <div className='formDiv'>
        <h1>회원가입</h1>
        <Link to='./loginRef.js'>여기로 이동</Link> // 이동하고 싶은 컴포넌트
   		// Link to문을 사용하여 이동할 경로를 설정해준다. 
   		// 비슷한 기능으로 useNavigate가 있다.