[인스타그램 클론코딩] 02. 회원 가입 구현(Front-End)

React 프로젝트의 폴더구조는 다음과 같다.

public
src
--components
--pages

 

1. components : 작성한 JS 모듈들을 모은 폴더이다.

2. pages : React 컴포넌트들을 모은 폴더이다.

 

1. 필요 모듈 설치

npm i react-router-dom axios

 

- 컴포넌트 전환에 필요한 react-router-dom, 그리고 ajax 대신 HTTP 요청을 도와줄 axios 모듈을 설치한다.

 

2. App.js 설정

import {BrowserRouter as Router, Route, Routes} from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/users" element={<UserContainer/>}>
            <Route path='sign-in' element={<SignIn/>}/>
            <Route path='sign-up' element={<SignUp/>}/>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

 

- BrpwerRouter 로 Component들을 감싸주고, 그 안에 url에 따라 변경될 컴포넌트들을 정의한다.

- /users로 시작되면 UserContainer 를 랜더링하게 되는데, 그 뒤에 sign-in이면 SignIn, sign-up이면 SignUp 컴포넌트를 추가적으로 랜더링하게 된다.

 

3. UserContainer.js 작성

const UserContainer = () => {
    return (
        <div className={style.user_container}>
            <Outlet/>
        </div>
    );
};

export default UserContainer;

 

- Outlet 부분은 앞서 설정한 /users 뒤에 오는 url에 따라 매핑되는 컴포넌트들이 랜더링 될 위치이다.

 

4. authAxios.js 작성

import axios from "axios";

const headers = {
    'Access-Control-Allow-Origin': '*',
}

const authAxios = axios.create({
    baseURL: '/api/users',
    headers: headers
});

authAxios.interceptors.response.use(
    (response) => {
        return response;
    },
    (error) => {
        return Promise.reject(error);
    }
);
export default authAxios;

- 로그인 및 회원가입에 사용될 axios 요청을 미리 custom 하여 작성해둔다.

- baseURL은 /api/users, header에는 access-control-allow-origin을 모두로 설정하여 넘겨주게 된다.

 

5. SignUp.js 작성

const SignUp = () => {
    const signup = [
        {name: 'email', type: 'text', placeholder: '이메일'},
        {name: 'password', type: 'password', placeholder: '비밀번호'},
        {name: 'name' ,type: 'text', placeholder: '성명'},
        {name: 'nickname' ,type: 'text', placeholder: '닉네임'},
        {name: 'phone' ,type: 'text', placeholder: '핸드폰번호'}
    ]

    const [inputs, setInputs] = useState({
        email: '',
        password: '',
        name: '',
        nickname: '',
        phone: ''
    })

    const onChange = (e) => {
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value
        });
    };

    const navigate = useNavigate();

    const onSubmit = () => {
        authAxios.post("/join", inputs)
            .then((res) => {
                alert(res.data);
                navigate("/users/sign-in");
            })
            .catch((err) => {
                alert(err.response.data);
            });
    };

    return (
        <>
            <div className={style.sign_input_container}>
                <div className={style.logo}>
                    OutStagram
                </div>
                {signup.map((component, idx) => {
                    return (<input key={idx} className={style.inputs} name={component.name} type={component.type} placeholder={component.placeholder} onChange={onChange}/>);
                })}
                <button className={style.buttons} onClick={onSubmit}>회원가입</button>
            </div>

            <div className={style.sign_nav_container}>
                <div>
                    계정이 있으신가요?
                </div>
                <div className={style.nav_link} onClick={() => navigate('/users/sign-in')}>
                    로그인
                </div>
            </div>
        </>
    );
};

export default SignUp;

 

- signup 배열에 있는 정보를  map 함수를 통하여 input 태그로 만들어 반복 랜더링한다. 여기서 onChange 메서드를 통하여 input들의 상태를 관리한다.

- useNavigate 메서드를 사용하여 url에 따른 Router 변경을 요청한다.

- authAxios를 사용하여 요청이 정상적으로 수행되면 요청결과를 alert한 뒤, login 페이지로 navigate하며, 에러가 발생했다면 에러 세부 메세지를 alert해준다.