React 조건부 렌더링을 활용한 로그인/회원가입 폼 리팩토링

 

과제진행중 , 로그인 페이지와 회원가입 페이지와 로그인 페이지에서 공통 입력폼을 사용하는데 헷갈리는 부분이 있었다.

 

로그인 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 제출버튼

회원가입 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 닉네임 인풋, 제출버튼

 

회원가입 페이지에 인풋창이 하나 더 있는데 이걸 어떻게 공통컴포넌트로 사용할수 있을까...?!

 

내가 생각한 방법은 각 페이지에서 다른 props를 넘겨주어, 조건에 따라 각 페이지에 맞는 ui를 return 시켜주는것이었다.

//로그인페이지에서 
<AuthForm mode="login"></AuthForm>

//회원가입페이지에서
<AuthForm mode="signin"></AuthForm>

const AuthForm = ({ mode }) => {
  if (mode === "signin") {
    return (
      <div>
        <form className="flex flex-col space-y-6 bg-gray-50 p-6 rounded-lg shadow-md">
          <input
            type="text"
            placeholder="아이디"
            className="p-4 border border-gray-300 rounded-lg"
          />
          <input
            type="password"
            placeholder="비밀번호"
            className="p-4 border border-gray-300 rounded-lg"
          />
          <input
            type="text"
            placeholder="닉네임"
            className="p-4 border border-gray-300 rounded-lg"
          />
          <button className="bg-primary p-4 rounded-md text-white">
            회원가입
          </button>
        </form>
      </div>
    );
  } else if (mode === "login") {
    return (
      <div>
        <form className="flex flex-col space-y-6 bg-gray-50 p-6 rounded-lg shadow-md">
          <input
            type="text"
            placeholder="아이디"
            className="p-4 border border-gray-300 rounded-lg"
          />
          <input
            type="password"
            placeholder="비밀번호"
            className="p-4 border border-gray-300 rounded-lg"
          />
          <button className="bg-primary p-4 rounded-md text-white">
            로그인
          </button>
        </form>
      </div>
    );
  }
};

export default AuthForm;

 

근데 이렇게 구현 하고나니 공통으로 쓰는게 아닌 각 페이지별로 구현을 해주고 있었기 때문에 공통으로 묶어줄수 있는 방법을 생각하게되었다.

 

잘 생각해보면

로그인 페이지 : 아이디, 비번, 버튼

회원가입 페이지 : 아이디, 비번, 닉네임, 버튼

 

닉네임 인풋창만 회원가입페이지에서 노출시켜주고 나머지 폼은 공통이다.

 

그러니까 페이지에서 넘겨준 props가 signin 일때만 노출시켜주고 나머지 폼은 공통으로 노출 시켜주면 된다.

 

&& 연산자 조건부 렌더링

리액트 공식문서

 

&&연산자 의 앞부분 조건식이 참일때만 결과가 수행된다.

 

조건부 렌더링

 

버튼 텍스트는 삼항연산자를 이용해서 signin일때 '회원가입', 그렇지 않을때는 '로그인' 으로 해주면 된다!

 

 

정리하자면 :

1. 각 페이지에서 props를 넘겨주고,

2. form 컴포넌트 넘겨받은 prop에따라 조건부 렌더링 걸어주기!

 

그러면 이제야 공통 컴포넌트를 사용했다고 할수있겠다!