[React] 회원가입 화면 Form으로 만들기

2023년 1월 3일 작성

 

이번주부터 프로젝트 기간이다. 우리 팀은 1차 프로젝트로 마켓컬리 사이트를 클론하기로 했다. 사이트를 나눠보니 1. 로그인 2. 회원가입 3. 메인(상품리스트) 4. 장바구니 5. 세부 상품 페이지 6. 마이페이지 7. 결제 페이지 8. Nav 9. Footer 정도가 나왔다. 우리팀은 프론트엔드가 3명이라 처음부터 3개 정도씩 분담할까 하다가 다음주 금요일까지 완성하는 게 가장 중요하다고 생각해서 각자 하고싶은 페이지를 한두개씩 정하고, 작업이 빨리 끝난 사람이 하나씩 담당하기로 했다.

 

나는 로그인과 회원가입 페이지를 맡았다. 첫 번째 이유는 처음으로 form 을 적용해보고 싶어서이고 두 번째 이유는 지난 번에 통신을 할 때 쩔쩔매서 다시 해보고 싶었다. 그래서 맡은 업무를 하면서 Login 페이지와 SignUp 페이지에 form을 두 번이나 적용해보고 또 백엔드와 Login, SignUp 까지 통신을 해볼 수 있어서 정말 좋았다!><잊어버리기 전에 form 에 대해 정리해보자.

form

form이란

 

form은 사용자가 입력한 것을 서버로 전송할 때 사용하는 형식이다. form 태그는 Header Nav Footer 등 시멘틱 태그처럼 큰 틀로 사용하면 된다. 보통 아래와 같이 form 태그 안에 input 을 활용해 로그인 또는 회원가입창을 만든다!

 

<form onChange={handleValues}> 
          <input
            className="inputId"
            name="id"
            type="email"
            defaultValue={id}
            placeholder="아이디를 입력해주세요"
          />
          <input
            className="inputPwd"
            name="pwd"
            type="password"
            defaultValue={pwd}
            placeholder="비밀번호를 입력해주세요"
          />
</form>

 

form 사용 시 한 가지 주의할 점이 있다면 input의 value 속성이 변하는 값일 때에는 value 대신 defaultValue로 작성해줘야 한다는 점이다. 아래와 같은 오류가 떠서 알아보니 value ➡ defaultValue로 수정해주거나 value 속성이 변하지 않는 값일 때에는 readOnly 속성을 추가해줘야 한다고 한다.

 

Warning: Failed prop type:
You provided a value prop to a form field without an onChange handler.
This will render a read-only field. If the field should be mutable use defaultValue.
Otherwise, set either onChange or readOnly.

 

form 태그의 속성

 

action, method, target, name 등의 속성이 있다. action에는 서버의 url을, 그리고 method에는 fetch()처럼 서버를 전송하는 방식을 적으면 된다. 나는 fetch()를 이용해서 서버에 input 값들을 보냈기 때문에 굳이 form에 action과 method를 사용할 필요는 없었다.

target 속성은 a 태그의 target 과 비슷하게 서버에 전송한 결과를 새창에 띄워줄 것인지, 아니면 현재 창에 보여줄 것인지 등을 정할 수 있는 속성이다. name 속성은 form 태그의 이름을 명시해주는 속성이다.

 

form 태그의 장점

 

form 태그의 편리한 점 중 하나는, 엔터만 쳤을 때도 서버로 데이터가 전송된다는 점이다. input과 button 태그만으로 로그인 화면이나 댓글 창을 구현했을 때에는 엔터를 쳤을 때에도 전송이 되도록 따로 함수를 만들어줘야 했지만 form에서는 그럴 필요가 없다. 또 form 에다가 함수 하나만 입력해줘도 다른 input 창에 handleValues 함수가 적용된다는 장점이 있다.

 

Login, signUp 페이지 작업 피드백

 

로그인과 회원가입 통신이 우선적으로 이뤄져야 장바구니와 결제 기능을 구현할 수 있어서 빨리 레이아웃을 완성해야 한다는 생각이 컸다. 그래서 회원가입 페이지를 작업할 때 '컴포넌트화할 수 있을 것 같은데?' 라는 생각이 들었지만 그 생각을 흘려보내고 통으로 레이아웃을 짰다.  결과적으로 통신이 제대로 이뤄진다는 걸 빨리 확인할 수 있었지만, 이런 코드를 작성할 거라면 리액트가 아닌 HTML, CSS를 쓰지, 뭐하러 리액트를 사용하나 싶었다. 그래서 좀더 고민해보고 컴포넌트화해서 코드를 수정해보려고 한다. 구상하는 데 시간이 좀 걸리겠지만 그만큼 성장할 수 있을 거라는 걸 안다. 앞으로는 리액트의 특징은 '컴포넌트를 통한 재사용성'에 있다는 걸 명심하고 레이아웃을 만들어야겠다! 나 자신 화이팅~!