컴포넌트를 분리하기 위해 고려한 것

게시물 상세 읽기페이지를 제작하는 과정에서 내가 했던 고민

• 상세 읽기 페이지는 보이는 경우의 수에 따라 페이지의 형태를 바꿔야 한다.
  -> 컴포넌트를 어떻게 쪼개서 어디까지는 공용으로 사용하고 어디까지는 별도로 작성해야 될지가 고민되었다.

• 경우의 수
  1. 로그인을 한 경우, 로그인을 하지 않은 경우
  2. 로그인한 사용자가 게시물 작성자인 경우, 작성자가 아닌 경우
  3. 이미 종료된 투표인 경우, 종료되지 않은 투표인 경우
  4. 이미지 투표인 경우, 텍스트 투표인 경우
  5. 중복 투표인 경우, 단일 투표인 경우
  

• 컴포넌트를 쪼개기 위해 고려했던 부분은 어떻게 쪼개야 재사용성을 높이고 페이지 전체 렌더링을 줄일 수 있을까였다.

• 쪼개는 과정에서 생각했던 것들
  1. 로그인을 하지 않은 사람과 로그인을 했지만 작성자가 아닌 경우 종료된 투표의 페이지는 버튼만 바뀐다 -> 버튼만 바뀌게 만들자
  2. 중복 투표와 단일 투표는 styled component에 보내주는 props가 달라서 따로 작성하지 않으면 정확하게 상태를 변경해줄 수 없다 -> 구분하자
  3. 로그인한 사용자가 게시물 작성자인 경우 투표버튼을 비활성화 해야 되기 때문에 get요청을 보냈을 때 'isAuther: true'와 같은 형태의 정보를 달라고 백엔드 팀원에게 요청하자 -> 해당 내용이 추가되었고 버튼 컴포넌트에서도 필요하므로 전역 상태로 만들어 주었다

  결과물은 다음과 같다

  • 데이터 받아오는 페이지

    <div style={displayStyle}>
        {voteBtns?.map((el, idx) => {
          if (data?.duplicate) {
          //중복투표라면
            return (
              <DupleVoteContainer
                key={el.id}
                id={el.id}
                content={el.content}
                count={el.totalVote}
                selectedBtn={selectedBtn}
                duplicate={data?.duplicate}
                handleSelectedBtn={handleSelectedBtn}
                voteType={data?.voteType}
                totalCount={totalCount}
                isTopicVoteItemVoted={el.isTopicVoteItemVoted}
              />
            );
          } else {
          //단일투표라면
          return (
            <SingleVoteContainer
              key={el.id}
              id={el.id}
              content={el.content}
              count={el.totalVote}
              selectedBtn={selectedBtn}
              duplicate={data?.duplicate}
              handleSelectedBtn={handleSelectedBtn}
              voteType={data?.voteType}
              totalCount={totalCount}
              isTopicVoteItemVoted={el.isTopicVoteItemVoted}
            />
          );
         }
        })}
      </div>

  • 단일 투표일때

      <>
        {voteType === 'text' ? (
          <div onClick={handleModal}>
            <SingleTextVote
              content={content}
              count={calculated}
              isTopicVoteItemVoted={isTopicVoteItemVoted}
            />
          </div>
        ) : (
          <div onClick={handleModal} style={imageMargin}>
            <SingleImageVote
              content={content}
              count={calculated}
              isTopicVoteItemVoted={isTopicVoteItemVoted}
            />
          </div>
        )}
      </>

  • 중복 투표일 때

     <>
        {voteType === 'text' ? (
          <div onClick={onVote}>
            <DupleTextVote clicked={clicked} content={content} count={count} />
          </div>
        ) : (
          <div onClick={onVote} style={{ margin: '5px' }}>
            <DupleImageVote clicked={clicked} content={content} count={count} />
          </div>
        )}
      </>

  • 버튼 컴포넌트에서 상태 반영하기

    //작성자인지 여부만 고려
    <> 
        {!isAuthor ? (
          <>
            <S.button id="votelist" onClick={handleLink} color={'#4285f4'}>
              목록가기
            </S.button>
            <>
              {openModal ? (
                <ButtonModal
                  text={askText}
                  confirmFunc={handlePost}
                  setOpenModal={setOpenModal}
                />
              ) : null}
            </>
          </>
        ) : (
          <>
            <>
              <S.button id="delete" onClick={onClickBtn}>
                삭제하기
              </S.button>
              <>
                {isClosed ? null : (
                  <S.button id="patch" onClick={onClickBtn} color={'gray'}>
                    수정하기
                  </S.button>
                )}
              </>
              <S.button id="votelist" onClick={handleLink} color={'#4285f4'}>
                목록가기
              </S.button>
            </>
            <>
              {openModal ? (
                <ButtonModal
                  text={askText}
                  confirmFunc={
                    apiMethod === 'patch' ? handlePatch : handleDelete
                  }
                  setOpenModal={setOpenModal}
                />
              ) : null}
            </>
          </>
        )}
      </>