[React] Day_81 최종 프로젝트 기능 구현 내용정리

 

좀.. 많이 바뀌어버린 작성페이지

 

와이어프레임 제작이 완료되어 해당 디자인에 맞게 기능구현을 시작해야 하는 림졍..

(그렇다.. 할 일이 고봉밥급이다… 어헝헝)

무엇부터 시작해야 할지 어지럽지만 우리의 림졍은 일단 냅다 스키마를 보며

코드를 우당탕탕 작성해나가기 시작하는데…

 

CRUD - 작성 페이지 작업 진행 (+ 너무 많은 useState 사용에 대한 해결안)

useState.. 이렇게 남발해도 되는건가?

이러다 useState 지옥되겠네...

1. useState, 너무 많이 쓰는 게 맞을까?

 

작업 진행은 스키마 수정이나 기타 사항이 생길 것 같아

우선 위치 및 스케줄링 관련 기능 테스트를 위한 레포지토리에서 코드를 짜고, 이후 메인 레포지토리에 옮기는 방식으로 진행되었다.

GitHub - reizvoll/testtt

 

작성 페이지 렌더링 방식은 CSR로, 클라이언트 컴포넌트들로만 작업하니 일반적인 JS 작업 방식과 큰 차이가 없었는데,

특히 서버 컴포넌트로 변환해주는 대공사가 필요없어.. 아주 행복했다!

그러나 문제는 여기에 있었는데..

작성 페이지를 만들면서 사용자 입력을 처리하기 위해 useState를 사용하기로 한 림졍. 입력값을 받아서 관리하려면 각각의 상태를 관리해야 하므로 각각에 대한 useState를 우다다 선언하고 있었다.

 

const WritePage = () => {
  const [address, setAddress] = useState('');
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [bodySize, setBodySize] = useState({ height: '', weight: '' });
  const [thumbnail, setThumbnail] = useState('');
  const [tags, setTags] = useState<string[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const router = useRouter();
  const currentUser = useAuthStore((state) => state.user);
};

 

그런데… 음.. 막상 우다다 코드를 적어보니 생각보다 useState가 많이 들어가게 되어

이렇게 많은 useState를 사용해도 되는가.. 에 대한 의문점이 생겼다. (아니 이렇게 써도 되는거 맞나..?)

 

2. useState를 너무 많이 사용했을 때의 문제점

 

useState를 과도하게 사용하면 다음과 같은 문제점들이 발생할 수 있다.

1. 가독성 저하
   상태가 많아지면 useState가 주르륵 늘어나게 되면서 코드가 복잡해지므로 코드 가독성을 떨어뜨리게 됨
2. 비효율적인 렌더링
   각각의 상태가 독립적으로 관리되어 하나의 상태만 업데이트해도 전체 컴포넌트가 비효율적으로 렌더링이 됨
   (상태가 많아질수록 불필요한 렌더링이 발생할 가능성이 높아짐)
3. 어려운 유지보수
   새로운 상태를 추가하거나 수정하려고 하면, useState를 개별적으로 또 추가하거나 수정해야 하므로 유지보수가 힘듬
   (상태가 많아질수록 머리도 복잡해지고 실수할 가능성이 커지기 때문)

 

3. 해결책: 상태를 객체로 묶어서 관리하기

 

useState를 여러 번 쓰는 대신에, 하나의 useState로 상태를 객체로 묶어서 관리하는 방법을 채택하였다.

const WritePage = () => {
  const [formState, setFormState] = useState({
    address: '',
    title: '',
    content: '',
    bodySize: { height: '', weight: '' },
    thumbnail: '',
    tags: [],
    isModalOpen: false,
  });

  const handleChange = (field, value) => {
    setFormState((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  return (
    <>
      <input
        value={formState.title}
        onChange={(e) => handleChange('title', e.target.value)}
      />
      {/* 다른 input 요소 */}
    </>
  );
};

 

3.1. 장점

1. 코드의 간결화
   상태를 객체로 관리 → useState 선언이 단순해지고, 상태 변경 로직도 재사용 가능
2. 렌더링 최적화
   하나의 useState를 사용 시, 상태 변경 과정에서 불필요한 렌더링을 줄일 수 있음
3. 유지보수 용이
   새로운 상태를 추가 혹은 변경 시, 객체에 필드를 추가하거나 업데이트 → 코드의 유지보수 용이

 

4. 결론

 

작성 페이지를 작업하면서 useState를 여러 번 선언하는 대신 객체로 상태를 묶는 방법을 적용하여

효율성과 가독성 측면에서 확실히 만족스러운 결과를 얻을 수 있었음!

 

[참고 링크]

[React] State로 input 상태 관리하기

 

마무리 - 디자인 시안 주세요.

 

한번 만들어보고 싶었다. 이 짤.

 

그래도 이전에 기능적인 개발은 거의 되어있는 상태라

2-3일 내로 와이어프레임과 비슷하게 만들어질 거 같은 림졍의 담당 페이지...

앱 -> 웹 대신 우리가 지금껏 적용해왔던 웹 -> 앱 형식으로 가게 되어

편하게 작업이 진행될 예정이다.. (디자이너 팀에게 무한 감사를..)

후 오늘은 여기서 마치고 다음에 보자구요?

굳바2

 

 

오늘의 KPT 회고

 

Keep: 기능적인 부분, 그래도 빠르게 소화하는중!

Problem: UX적 관점에서 생겨난 기능부분.. 넣어보고 싶어졌다.

Try: 디자이너팀에게 스리슬쩍 물어보기