마이페이지만들기

마이페이지 구현하기

 

1.세션에서 아이디를 가져온다

 

2.useeffect로에 [] 의존성 걸고 아이디에 해당하는 유저정보들을 들고온다.

 

3.회원가입폼을 그대로 들고오되 아이디와 이름은 reanonly로 비밀번호는 빈값으로 두고 나머지는 수정가능하게 둔다

 

4.유저정보수정은 회원정보 내용 토대로 수정하는것을 목표로한다 input태그 value에 회원정보내용을 뿌려준다

 

5. 이제 입력받을 준비를 끝내고 입력을 받는다

 

6.비밀번호가 서로 맞으면되는걸로하고 주소 전화번호 비밀번호 3가지를 다 바꿀수있게해준다.

 

7. 현재입력값을 서버로 보낼 준비를 해야한다

 

8.input의 입력값을 user에 옮겨줘야한다. 

 

9. 일단 onchange로 input의 값을 감지하여 이벤트객체에 담아준다.

 

10 이벤트객체는 키와 값으로 값을 저장하며 input태그에 설정해준 키값으로 값을 넣어서 이벤트객체로 전달한다.

 

11.setuser에 기존객체에 e.target.key를 서로 매칭시키면 값이 객체내로 들어간다.

 

12.좀더 자세히 알아보면 ...user를 사용하면 키와값,키와값,키와값.....으로 나오고 한객체에 같은 키값이면 값을 덮어써준다.

 

13.그리고 다시 {} 를 씌워주면 새로운주소값에 할당되며 새로운 객체가생성이되는것이다.

 

14. 이제 완성된 user를 axios로 서버로보내야한다.

 

15.버튼타입이 submit이면 form태그의 onsubmit속성이 작동되는데 페이지가이동되므로 e.preventdefault로 이동을 막아줘야한다.

 

16. 목표는 비밀번호, 주소,전화번호를 바꿔주는것이므로 input태그에 required 속성을줘서 빈칸처리를해준다

 

17.그다음 비밀번호와 비밀번호확인이 맞는지확인한후 서버로 user데이터를 보내준다.

 

18.axios이후 프로미스객체.then에 home화면으로 이동하고 alert로 회원정보수정이되었음을 알려준다.

 

19 페이지이동시 react-router-dom에서 usehistory를 import해온후 변수에 옮겨준다.