[React] 다시 만드는 todo list (투두메이트 클론) (2)

중간고사 기간 잘 보내셨나요.. 전 못보냈습니다. 흑흑
다음 학기엔 무조건 기숙사에 들어가겠다는 생각을 다시 한번 해보면서, 이번주 WIL을 적고 있습니다.

중간 휴식기간동안 짜잘짜잘하게 프로젝트를 건드려보았습니다.

1. 이전에 있었던, 바텀시트 관련 문제

각 TodoItem마다 있던 바텀시트를 더 상위로 올려서 관리하도록 했다. 이젠 어떤 투두에서 연 바텀시트인지 바로 알 수 없기 때문에, 선택된 투두를 전역상태로 관리하도록 했다.

 

useBottomSheet.tsx

import { useRecoilState } from 'recoil';
import { ITodoItem } from '../interfaces/ITodoItem';
import { bottomSheetState } from '../stores/bottomSheet';

function useBottomSheet(initial: boolean) {
  const [bottomSheet, setBottomSheet] = useRecoilState(bottomSheetState);
  const { isOpen, selectedItem } = bottomSheet;

  function onOpen(item: ITodoItem) {
    setBottomSheet({ selectedItem: item, isOpen: true });
  }
  function onDismiss() {
    setBottomSheet({ selectedItem: null, isOpen: false });
  }

  return { isOpen, selectedItem, onOpen, onDismiss };
}

export default useBottomSheet;

열림/닫힘 상태와 선택된 투두를 리코일 atom으로 만들어 관리한다. 간단간단쓰.

 

2. Todo 관련 로직 추상화

UI컴포넌트에서 최대한 비즈니스 로직을 분리하고, 커스텀훅을 이용해 넘겨받아 사용한다.
저번주 스터디 시간에 보여드렸던 내용이죠??

const useTodo = () => {
  const [todo, setTodo] = useRecoilState(todoState);

  const insertTodo = (inputValue: string, category: ICategory) => {
    if (inputValue) {
      const newTodo = {
        label: inputValue,
        id: uuid(),
        isDone: false,
        category: category,
      };
      setTodo((prev) => [...prev, newTodo]);
    }
  };

  const editTodo = (inputValue: string, id: string) => {
    if (inputValue) {
      const index = todo.findIndex((v) => v.id === id);
      const temp = [...todo];
      temp[index] = { ...temp[index], label: inputValue };
      setTodo(temp);
    }
  };

  const toggleTodo = (id: string) => {
    const index = todo.findIndex((v) => v.id === id);
    const temp = [...todo];
    temp[index] = { ...temp[index], isDone: !temp[index].isDone };
    setTodo(temp);
  };

  const deleteTodo = (id: string) => {
    setTodo(todo.filter((v) => v.id !== id));
  };

  return { insertTodo, editTodo, toggleTodo, deleteTodo };
};

export default useTodo;

투두 삭제하기 등의 함수를 커스텀훅을 통해 받아올 수 있고, 투두 상태(삭제할 투두의 id) 또한 전역으로 관리되기 때문에 프로젝트 어디에서라도 사용할 수 있다. 투두 컴포넌트와 떨어져있는 바텀시트 컴포넌트에서 받아와 사용하기에 좋다.

 

3. 친구 목록 (문자열에서 이모지 다루기)

나름 고민을 많이 했다.

 

const initialState: IFriend[] = [
  {
    userId: 'user1',
    name: '🐬규진',
    profileImage: '',
    statusMessage: '어쩌다 갓생',
  },
  {
    userId: 'user2',
    name: '유진',
    profileImage: 'https://i.ibb.co/MgmDcz1/1021805078815985664.webp',
    statusMessage: '주니어 PM이 되기 위한 노력',
  },
  {
    userId: 'user3',
    name: '김테스트',
    profileImage: '',
    statusMessage: 'user3',
  }
];

친구 객체는 이런 형식이다. 프로필 이미지 부분에서 시간을 많이 썼다.
프로필이미지가 있을 때는 해당 이미지를 불러와 백그라운드로 보여주고, 없을때는 이름의 첫글자를 보여준다.

 

FriendsIcon.tsx

const ProfileImage = styled.div<{ friend: IFriend; selected: boolean }>`
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background-color: ${({ theme }) => theme.palette.mono.gray_f5};
  ${({ friend }) => getImageStyle(friend)}
  border: ${({ selected, theme }) =>
    selected && `2px solid ${theme.palette.mono.gray_44}`}
`;

const getImageStyle = (friend: IFriend) => {
  switch (friend.profileImage.length) {
    case 0:
      return css`
        ::after {
          content: '${sliceFirstWord(friend.name)}';
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          font-weight: 500;
        }
      `;
    default:
      return css`
        background-image: url(${friend.profileImage});
        background-size: 40px 40px;
        background-position: center;
      `;
  }
};

프로필 이미지에 관한 부분만 따로 빼서 넣어주었다. 이름의 첫글자를 보여줄 때는 after 가상 선택자를 이용한다.

이 과정에서 문제가 하나 있었다. 투두메이트에 이름의 첫글자로 이모지를 쓰는 경우가 많은데, 프로필 이미지에 이모지가 들어가면 꽤 이쁘다. 무작정 문자열의 첫번째 인덱스를 가져오니까 이모지가 깨졌다. 이모지는 유니코드를 쓰는데, 문자열로 처리될때 길이가 막 2,3 이렇게 나오더라.

sliceFirstWord

const sliceFirstWord = (string: string) => {
  // https://avengersrhydon1121.tistory.com/268
  if (
    /^([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/.test(
      string,
    )
  ) {
    return string.slice(0, 2);
  } else {
    return string[0];
  }
};

받은 문자열이 이모지로 시작하면 0,1 인덱스를 리턴하고, 아니면 0번째 인덱스만 리턴하도록 했다. 정규식을 사용했는데, /^ / 를 통해 어떠한 문자로 시작하는지 알 수 있다.

짠

 

4. 렌더링 최적화?