회원가입을 퍼널 형식으로 만들었다.
퍼널이란?
쉽게 말해, 토스 회원가입 형식이라고 생각하면 된다!
한 페이지마다 한개의 input이 있는거다.
퍼널형식을 채택하기까지 고민이 많았다.
1. input이 포함된 모든 페이지를 만들어하는가
2. input을 하나씩 받아오면 어떻게 db에 저장할 것인가
튜터님께서 토스 퍼널 방식 이 링크를 주셔서 정독해봤다.
내가 만든 방법은
그냥 input을 step으로 만들어서 map돌리기,,
이렇게 하면 페이지를 여러개 안만들어도 되지만, input값을 받을때 정말 생각을 많이 해야한다.
덮어쓰기 형식으로 되는 퍼널 형식!
input을 저장하고 db에 넣을때
setUserInfo((prev) => ({ ...prev, [name]: value }));
이렇게 상태를 업데이트 하는 함수를 작성했다. 기존 상태를 인수로 받아서 새로운 상태를 반환하는 콜백함수를 만들었다. prev는 이전상태를 의미!
...prev는 이전 상태의 모든 속성을 복사한다.- 특정 입력요소의 값이 변경되면 그에 해당하는 상태 속성도 업데이트 시켰다.
전체적으로 이 코드는 사용자가 입력한 값에 따라 setUserInfo 상태를 동적으로 업데이트하게 했다. 예를 들어, 만약 <input name="email" value="test@example.com" /> 요소에서 handleChange 함수가 호출되면, setUserInfo 함수는 userInfo 상태에서 email 속성을 example@example.com으로 업데이트하는 형식으로 했더니
퍼널 형식에서의 정보저장 성공!
