리팩토링 진행

이번 개인과제가 마무리되었다.

개인 과제 마무리 후 해설 영상을 보면서 리팩토링을 진행하였다.

 

1. 리듀서 로직

기존에는 리듀서에서 처리해야 할 로직을 컴포넌트에서 하고 있었다.

이 부분을 리듀서로 옮겨와서 처리하도록 변경하였다.

 

[리팩토링 전]

/redux/modules/letter.js

//리듀서
const letter = (state = initialState, action) => {
  console.log(state);
  switch (action.type) {
    case UPDATE_LETTER:
      return {
        ...state,
        data: action.payload
      };
    default:
      return state;
  }
};
export default letter;

 

 

[리팩토링 후]

/redux/modules/letter.js

//리듀서
const letter = (state = initialState, action) => {
  console.log(state);
  switch (action.type) {
    case UPDATE_LETTER:
      const { updateMemberId, updateIdx, content } = action.payload;
      state.data[updateMemberId][updateIdx].content = content;
      localStorage.setItem(LOCAL_KEY, JSON.stringify(state.data));
      return {
        ...state,
        data: state.data
      };
    case DELETE_LETTER:
      const { memberId, deleteIdx } = action.payload;
      state.data[memberId].splice(deleteIdx, 1);
      localStorage.setItem(LOCAL_KEY, JSON.stringify(state.data));
      return {
        ...state,
        data: state.data
      };
    case ADD_LETTER:
      return {
        ...state,
        data: action.payload
      };
    default:
      return state;
  }
};
export default letter;

 

 

2. 버튼 컴포넌트 - state에 따른 조건부 렌더링

이전에는 각각 버튼마다 각자의 state를 가지고 제어를 했는데, 

수정 중인지의 여부를 관리하는 state를 하나 두고 그 state로 조건부 렌더링을 하도록 리팩토링을 진행하였다.

 

확실히 여러 개의 state로 관리하는 것보다 한 개의 state로 통합적으로 관리하다 보니 코드도 더 짧고 눈에 잘 들어온다. 

 

[리팩토링 전]

LetterContent.jsx

export default function LetterContent({ data }) {
    const [changeButtonVisible, setChangeButtonVisible] = useState("true");
    const [editButtonVisible, setEditButtonVisible] = useState("false");
    const [deleteButtonVisible, setDeleteButtonVisible] = useState("true");
    const [cancelButtonVisible, setCancelButtonVisible] = useState("false");
    
    //수정 영역 활성화 기능
    const editTextarea = () => {
        contentRef.current.focus();
        contentRef.current.readOnly = false;
        setIsEditing(true); //리팩토링 부분
      };

    //[공통] 버튼 display toggle 상태 변경
    const toggleVisible = () => {
      setChangeButtonVisible((prev) => (prev === "true" ? "false" : "true"));
      setEditButtonVisible((prev) => (prev === "true" ? "false" : "true"));
      setDeleteButtonVisible((prev) => (prev === "true" ? "false" : "true"));
      setCancelButtonVisible((prev) => (prev === "true" ? "false" : "true"));
    };
  return (
	<ButtonBox>
        <Button clickHandler={editTextarea} display={changeButtonVisible} variant="success">
          수정
        </Button>
        <Button clickHandler={editLetter} display={editButtonVisible} variant="success">
          완료
        </Button>
        <Button clickHandler={deleteLetter} display={deleteButtonVisible} variant="danger">
          삭제
        </Button>
        <Button clickHandler={cancelEditTextarea} display={cancelButtonVisible} variant="normal">
          취소
        </Button>
	</ButtonBox>
  );
}

 

 

LetterContent 컴포넌트에서 버튼 컴포넌트에 props를 내려주고 그 값을 styled-components에서 받아서 css display 속성으로 버튼을 보이게 할지 말지를 결정하였다.

 

ButtonStyles.js

export const StyledButton = styled.button`
  padding: 5px 10px;
  display: ${(props) => (props.display === "true" ? "block" : "none")}; //props로 display 값 전달
  ${(props) => props.$variant};
  color: #fff;
  border-radius: 5px;
  border: none;
  font-family: inherit;
  font-size: 16px;
`;

 

 

[리팩토링 후]

//생략

export default function LetterContent({ data }) {
  //리팩토링 부분
  const [isEditing, setIsEditing] = useState(false);

  //수정 영역 활성화 기능
  const editTextarea = () => {
    contentRef.current.focus();
    contentRef.current.readOnly = false;
    setIsEditing(true); //리팩토링 부분
  };

  return (
    <LetterContentItem>
      //생략
      <ButtonBox>
      	//리팩토링 부분
        {isEditing === true ? (
          <>
            <Button clickHandler={editLetter} variant="success">
              완료
            </Button>
            <Button clickHandler={cancelEditTextarea} variant="normal">
              취소
            </Button>
          </>
        ) : (
          <>
            <Button clickHandler={editTextarea} variant="success">
              수정
            </Button>
            <Button clickHandler={deleteLetterHandler} variant="danger">
              삭제
            </Button>
          </>
        )}
      </ButtonBox>
    </LetterContentItem>
  );
}

 

 

이제 버튼 컴포넌트에 state를 내려주지 않기 때문에 props로 display 속성을 지정하는 부분을 삭제하였다.

ButtonStyles.js

export const StyledButton = styled.button`
  padding: 5px 10px;
  ${(props) => props.$variant};
  color: #fff;
  border-radius: 5px;
  border: none;
  font-family: inherit;
  font-size: 16px;
`;