[React] 회원가입 화면 컴포넌트 분리

2023년 1월 5일 작성

지난번의 실수

 

지난 번에 컴포넌트 분리 없이 회원가입 화면을 구현했었다. 그 결과 자바스크립트 부분과 레이아웃 (심지어 약관동의 부분은 추가하지도 않았는데도..) 을 합쳐 코드가 250줄 가까이 됐다... 이것은 리액트를 활용하지 못한 잘못된 코드이기에 오늘 회원가입창을 아예 새로 다시 만들었다.

 

 

처음부터 다시 만들려고 한 것은 아니었다... 당연히 기존의 것을 활용하려고 좌우에 창을 띄워놓고 input 창에 들어갈 리스트를 정리해서 map()으로 화면에 뿌려주려고 했다. 하지만 리스트에 고정된 값이 있는가하면, input에 onchange함수를 통해 값을 가져와야하는 변수도 있어서 이것들을 어떻게 따로 넣어야 할지 감이 안와서 처음부터 한땀한땀 다시 작성했다..그러면서 다음부턴 제대로 구상을 하고 코드를 입력해야겠다고 다짐했다. 고생했지만 매우 큰 교훈을 얻었다!!

 

결국 공중분해되어버린 바보같은 코드들...

컴포넌트 분리 성공!

짠~~ SignUp.js에 전부 들어가있던 코드를 여러 부분으로 쪼개서 컴포넌트화했다. 그랬더니 확실히 코드가 많이 줄었다. 한 가지 고민인 건 에러메세지를 띄우는 훅과 함수를 넣지도 않았는데, 벌써 자바스크립트만 70줄 정도를 차지한다는 거다. 레이아웃은 고작 30줄밖에 안되는데... 이걸 또 컴포넌트로 분리를 해야 되는걸까? 이것은 기능 구현을 하면서 좀더 생각해봐야겠다.

 

 

컴포넌트 구성은 위와 같다. 부모 컴포넌트에서 자식 컴포넌트로 props를 잘 넘겨주고, 혼자 다르게 생긴 애들을 어떻게 해줄지만 좀 고민하면 금방금방 컴포넌트를 만들 수 있다. 예를 들어 SinpUp에 들어갈 SingUpItem 컴포넌트를 만들기 위해서 이메일~생년월일 Input 창에 들어가야 할 속성들을 아래와 같은 데이터로 만들어주고 혼자 다르게 생긴 이메일, 그리고 생년월일같은 부분만 신경써주면 된다.

 

  [INPUT_DATA]

  {
    id: 1,
    title: '이메일',
    name: 'email',
    type: 'email',
    placeholder: '아이디를 입력해주세요',
  },
  {
    id: 2,
    title: '비밀번호',
    name: 'pwd',
    type: 'password',
    placeholder: '비밀번호를 입력해주세요',
  }, ..생략...
  
  [SignUpItem.js]
   
const SignUpItem = ({
  type,
  title,
  name,
  placeholder,
  handleUserInfo,
  onClickCheckEmail,
}) => {
  return (
    <div className="signUpItem">
      <div className="nameSection">
        <label className="inputTitle">
          {title}
          <span className="star">*</span>
        </label>
      </div>
      {title !== '생년월일' && (
        <input
          className="inputSection"
          type={type}
          name={name}
          placeholder={placeholder}
          onChange={handleUserInfo}
        />
      )}
      {title === '생년월일' && (
        <BirthdayInput handleUserInfo={handleUserInfo} />
      )}
      {title === '이메일' && (
        <button className="comfirmRepetition" onClick={onClickCheckEmail}>
          중복확인
        </button>
      )}
    </div>
  );
};

 

혼자 다르게 생긴 친구들은 조건부 렌더링을 통해 조건에 해당될 때 또는 해당되지 않을 때 버튼을 보여주는 식으로 구현했다. 타이틀이 생년월일 때 birthdayInput을 보여줘~~ title이 이메일일 때 버튼을 보여줘~~ 이렇게 하나씩 명령하면 뚝딱하고 결과가 나오니까 재밌었다ㅎㅎ화면이 이상하면 그것은 명령을 내리는 나의 잘못이지 코드는 잘못이 없다는 걸 또 한 번 느꼈다^^씁쓸하구만

 

처음 회원가입창을 다시 만들 땐 오늘 안에 못 끝낼 거라는 생각을 좀 했는데 오늘 중으로 다 끝내서 뿌듯하당!! 로그인, 회원가입, 장바구니까지 레이아웃을 구현했으니 다른 부분 레이아웃도 얼른 맡아서 마무리해야겠다. 내일도 화이팅~~!!