TIL-220509.md

Today

---

TODOLIST

• 클라-서버 연동확인
• 회원가입 마무리
• 로그인

이전의 프로젝트에서는 정보 하나 당 useState를 각각 만들어주고 똑같은 행동을 수행하는 이벤트도 각각의 함수를 만들어주었었다. 당시 코드를 작성하면서도 이건 좋은 방법이 아닌것같다라는 생각을 했었는데 , 촉박한 시간대비 해야할 일들이 많고 어떻게든 프로젝트를 완성시키는것을 목표로 삼았기에 기존의 방법을 고수했었다. 그러다가 최근 리액트 기본 강의를 통해 반복되는 행위를 하는 코드를 하나의 함수로 통합해주고, 정보는 객체로 묶어 하나의 useState에 담아주는 방법을 알게되었고 이를 프로젝트에 적용 시켜 코드를 작성해보았다. 그랬더니 가독성도 좋고 깔끔한 코드가 완성되었다. 훨씬 좋은 코드를 작정하게 되었다는 기쁨에 보고 있으면 기분이 좋아지는 부분이다.

과거..

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

현재

const [userInfo, setUserInfo] = useState({ email: '', password: '' };

과거

const emailHandler = (e) => {
  setEmail(e.target.value)
};
const passwordHandler = (e) => {
  setPassword(e.target.value)
}

현재

 const handleUserInfo = (e: any) => {
    setUserInfo({ ...userInfo, [e.target.name]: e.target.value });
  };