$04. 리액트로 회원가입 구현

$01. 서버와 회원가입

고대로 가져와서 리액트에서 구동해볼 예정이다.

이미 어려운 부분은 해놨기 때문에 날로 먹을거라 생각했지만

나의 정식 리액트 프로젝트는 처음이라 쉽지 않았다.

 

분명 뭐가 이점인지는 알겠지만 아직까진 vanillaJS가 더 편한 것 같다.

그래도 다행인 것은 react의 인기 덕분인지 유사 자료를 찾는게 훨씬 쉬웠다.

 

react에서 동일한 프로젝트를 구현하기 위해 필요한 것은 다음이다.

useState도 사용해야하지만 이미 다뤄본 내용이기 때문에 하나만 추가로 정리했다.

 

useDispatch

 

사용하기 위해 react-redux를 추가로 설치해줘야한다.

$ yarn add react-redux

import는 다음과 같이 해주면 된다.

 

import { useDispatch } from 'react-redux';

 

Redux Essentials, Part 3: Basic Redux Data Flow | Redux

redux의 흐름을 이해해보기 위해는 위의 자료를 참고하는게 좋을 듯 싶지만

갖은 과제와 시험 기간의 압박으로 읽어보진 못했다.

 

방학 때 관련 튜토리얼을 진행해보기로 하고, 간단하게 정리된 문서만 읽어보았다.

useDispatch는 action을 통해 상태 값을 변경해주는 것이다.

 

초기 상태를 useState로 지정하고 사용자가 입력한 값(ID, Password, Nickname)을 useDispatch로 붙여주는 것이다.

사실 아직도 fetchAPI와 같은 기능인지 별개의 기능인지 헷갈린다.

 

나랑 같은 물음에서 시작한 문서가 없는걸보면 별개의 기능인 것 같다.

일단 이건 실습 과목이니 개념은 이정도로 정리하고 회원가입을 구현해보도록하자.

 

별개의 기능이다.
fetch를 통해 데이터를 가져오면 useDispatch를 통해 로그인 상태와 회원정보를 관리할 수 있다.

 

회원가입

 

회원가입 기능을 확인하기 위해서 이번엔 다음과 같은 정보를 입력해주었다.

email : lalala@naver.com
password : 123!diQdiq
nickname : lol

 

 

기존의 코드를 react화만 시키면 되었지만 아직 리액트 구문에 익숙하지 않아서 애를 썼다.

특히 css 처리를 어디서 해줘야할지 헷갈렸다.

 

그리고 열심히 찾은 disPatch()는 이런 소규모에선 굳이 필요 없는 것 같아서 사용하지 않았다.

이런 날도 있는거지!