[React Native] Google Forms 클론 프로젝트

Google Forms Clone Project

 

0. TypeScript + React Native + Recoil로 구현한 토이 프로젝트

• 3일동안 혼자서 Google Forms의 최소 기능을 구현
• Expo로 React Native를 설치해서 작업
  • 과거 프로젝트는 직접 에뮬레이터를 돌리면서 구현했는데, 정말 에뮬레이터 킬때마다 고역이었다.
  • Expo로 작업하니 아주 간편했으나 이것도 만능은 아닌듯.. 갑자기 실행 에러가 떠서 애먹었다.
• Recoil로 모든 state를 전역 관리
• StyleSheet로 스타일링

 

1. 기간

• 2024.05.17 ~ 19일

 

2. 스택

• TypeScript
• React Native
• Recoil
• UI 라이브러리(액션 시트..)

 

3. 구현 사항

• 설문 작성
• 설문 추가, 삭제, 복사
• 단답, 장문, 객관식, 체크박스
• 설문 미리보기

 

4. 기억하고싶은 코드 및 아쉬운 점

 

설문 리스트를 업데이트 하는 함수

const updateSurveyList = (
    id: number,
    action: "toggleSwitch" | "inputFocus" | "inputBlur"
  ) => {
    const updatedSurveyList = surveyList.map((item) => {
      if (item.id === id) {
        switch (action) {
          case "toggleSwitch":
            return {
              ...item,
              isEnabled: !item.isEnabled,
            };
          case "inputFocus":
            return {
              ...item,
              titleInputFocus: true,
            };
          case "inputBlur":
            return {
              ...item,
              titleInputFocus: false,
            };
          default:
            return item;
        }
      }
      return item;
    });
    setSurveyList(updatedSurveyList);
  };

 

설문 리스트가 객체로 이루어진 배열이기 때문에

객체 안에 속성을 업데이트를 하려면 우선, 리스트를 map으로 순회해준다.

그리고 클릭할 때 넘겨준 해당 설문 id와 동일한 id의 객체를 찾으면 변경해서 return 해주고

나머지는 그대로 return해서 변경된 리스트를 setState 해주는 함수.

 

솔직히 이런 기능들 todo list 만들 때 하던 것들인데 오랜만에 프로젝트를 해보니

이것도 버벅버벅.. 

 

inline style 사용을 지양하자

{survey.option === "단답형" && (
 <View style={{ borderBottomWidth: 1, width: 180, borderColor: "#E9E9E9"}}>
   <Text style={styles.optionText}>단답형 테스트</Text>
</View>
)}

 

Stylesheet를 정의하면서 사용해놓고 왜 이렇게 inline style을 사용했을까?

가독성은 떨어지고, 스타일을 한 곳에서 확인할 수 없잖아..

구현한다고 정신없어서 너무 이런거에 신경을 안쓴 것 같다.

앞으로는 inline style은 지양하도록 해야겠다..

 

복잡한 익명함수는 선언하여 사용하자

<Pressable
  style={styles.actionButton}
  onPress={() => actionSheetRef.current?.show()}
>

 

onPress 프로퍼티 안에 막 적지말고 가독성을 위해 함수는 선언해서 사용하자.

 

style은 style끼리, 함수는 함수끼리 빼서 독립적으로 관리하자

 

리턴문 위에는 함수가, 아래에는 Stylesheet를 두니깐 전체적으로 한 파일 안에 코드가 너무 많고

가독성도 없고 나중에 유지보수 하기도 힘들어보인다.

앞으로는 따로 파일로 빼서 import 하는 게 더 좋을 거 같다.