[기억하고 싶은 코드] 조건부렌더링 리팩토링(왓챠피디아 로그인/회원가입 모달창 구현하기1)

🔮 컴포넌트를 재사용하면서 로그인/회원가입 모달창을 구현해보자!

• 하나의 모달창 내에서 컴포넌트 재사용을 하면서 조건에 따라 렌더링이 변화하는 로그인/회원가입 화면을 구현했다.
• 별도 페이지가 있는 게 아니라 동일한 화면에서 새로고침 없이 렌더링 변화만 주도록 구현해야 했다.

• 아래는 로그인/회원가입 버튼과 카카오 소셜로그인 버튼 사이 부분과 관련된 코드이다.

      {format.type === 'signUp' && (
        <FormP>
          <FormSpan>
            이미 가입하셨나요?
            <FormSpanClick onClick={handleLogin}>로그인</FormSpanClick>
          </FormSpan>
        </FormP>
      )}

      {format.type === 'login' && (
        <FormP>
          <FormSpanClick>비밀번호를 잊어버리셨나요?</FormSpanClick>
          <FormSpan>
            계정이 없으신가요?
            <FormSpanClick onClick={handleLogin}>회원가입</FormSpanClick>
          </FormSpan>
        </FormP>
      )}

✍ 코드리뷰를 받았다 : 리팩토링 하시죠!?

아래와 같은 코드리뷰를 받았다.

🤡 아는 만큼 보인다더니 : 코드리뷰가 이해가 안돼요ㅜ.ㅜ

처음엔 코드리뷰가 무슨 말인지 이해가 안됐다...

음?? 필요한 부분만 조건부렌더링 한다고 ?? 이미 그렇게 한 거 아닌가 ??

format.type에 들어간 값이 signUp이랑 login 두 개이니 삼항연산자를 써서 표현하라는 이야기일까? 그렇다면 필요한 부분만 하라고 표현하지 않고 삼항연산자를 써서 해보라고 직접적으로 말씀하셨을 거 같은데... 🤔💭

🌻 리액트 공식문서를 찾아보자 : SOS 구글신

ㅎㅎㅎ모르는 건 구글에게 물어보자🤗
리액트 조건부랜더링 공식문서에서 정확하게 내가 쓴 코드를 덜 좋은 예시로 사용하는 걸 발견했다 두둥💥

💎 조건부렌더링을 인라인으로 쓰는 게 아니라 블록단위로 쓰면, 코드가 덜 명백하게 보인다는 사실!

코드 리팩토링

아래와 같이 리팩토링했다.

<FormP>
        {format.type === 'login' && (
          <FormSpanClick>비밀번호를 잊어버리셨나요?</FormSpanClick>
        )}
        <FormSpan>
          {format.type === 'signUp'
            ? '이미 가입하셨나요?'
            : '계정이 없으신가요?'}
          <FormSpanClick onClick={handleLogin}>
            {format.type === 'signUp' ? '로그인' : '회원가입'}
          </FormSpanClick>
        </FormSpan>
      </FormP>

하는김에 추가 리팩토링

조건부렌더링이 통째로 걸려있던 다른 코드도 해봤다
변화는 부분만 key값 단위로 통째로 어떻게 조건부렌더링을 하지? 한참 찾아보다가 아예 안에서 해보기로 했다. 간단한 발상인데 커다랗게 생각하는 게 편해서 그런지 이 방법이 안떠올랐네💐

 <ModalContainer>
      {isLogin ? (
        <Form
          format={LOGIN}
          kakaoBtn={kakaoBtn}
          handleChange={handleChange}
          handleLogin={handleLogin}
          inputValue={loginInput}
          submitData={submitData}
        />
      ) : (
        <Form
          format={SIGNUP}
          kakaoBtn={kakaoBtn}
          handleChange={handleChange}
          handleLogin={handleLogin}
          inputValue={signInput}
          submitData={submitData}
        />
      )}
      ;
    </ModalContainer>

위의 코드가 아래처럼 간결해졌다
💎props로 보내주는 key값에서도 조건부렌더링을 할 수 있는 거였다!

<ModalContainer>
      <Form
        kakaoBtn={kakaoBtn}
        handleChange={handleChange}
        handleLogin={handleLogin}
        submitData={submitData}
        format={isLogin ? LOGIN : SIGNUP}
        inputValue={isLogin ? loginInput : signInput}
      />
      ;
    </ModalContainer>

참고자료

• 깔끔한 조건부 렌더링 작성하기