풋볼러브 Front (12.29)

풋볼러브 Front (12.29)

 

오늘 수행 작업 : 회원가입 페이지 리펙토링

 

당근마켓 프론트 개발자 Nash 에게 코드리뷰를 받았는데, 내 코드의 문제점중 하나가 회원가입 페이지에서 onChange 이벤트로 input 값이 바뀔때마다 state 를 업데이트시켜서 joinData 를 최신화 시켰었는데, 문제는 이 방법이 비효율적이라는 것이다.

그래서 Nash 는 Form 태그를 이용해서 굳이 state 를 사용할 필요 없이 간단하게 joinData 를 서버로 전송할 수 있는 방법을 알려줬고 이를 적용했다.

 

const [newUserInfo, setNewUserInfo] = useState({
        id : null, 
        pwd : null,
        nickname : null,
        address:{
            city : '서울',
            street : '중랑구 망우로 173',
            zipcode: '10234'
        },
        lastName : null, // ok
        name : null, // ok
        brith : null, // ok 
        email : null, // ok
        phone : null, // ok
        type : 'NORMAL'
    })

기존 코드에서는 위와같이 state 를 다 선언해서 input 값이 바뀔때마다 setstate 로 값을 최신화 시켜줬다면,

 

새로운 코드에서는 

const handleSubmit = (e) => {
        e.preventDefault();
        const data = { id :e.target.id.value,
                pwd : e.target.pwd.value,
                nickname: e.target.nickname.value,
                address: {
                    city: '서울',
                    street: e.target.address.value,
                    zipcode: '122'},
                name: e.target.name.value,
                birth: e.target.birth.value,
                email: e.target.email.value,
                phone: e.target.phone.value,
                type: 'NORMAL'
            }

간단하게 form 태그에 이벤트 하나를 추가해서 처리해주었다.

 

이렇게 바꿈으로써 코드의 불필요한 리랜더링을 하지 않게 되었으며, 

mui 를 사용해 기존 input 태그를 대체시켜 코드의 양도 1/4 로 줄어들었다.