Firebase_ 프로필 이름 바꾸기 및 bug fix

하지만 이름을 바꾸어도 위쪽 Nav의 이름은 변경되지 않는다.

 

그 이유는 user id를 가져오기 위해

모든 컴포넌트마다 firebase.auth().currentUser(이후 authService라 칭함)을 불러온 것이아니라,

최상위 컴포넌트에서 한번 불러온 다음 props로 전달해줬기 때문이다.

 

즉, 여기에 사용된 user id는 react 내부에서 연결되어있다.

그렇기 때문에 프로필 컴포넌트에서 id를 변경하더라도,

Nav컴포넌트에서는 id변경을 감지하지 못한다.

(서버의 store에 연결되어 있는것이 아니기 때문)

 

새로운 정보를 적용하거나 상태의 변화가 있을때,

react는 새로운 정보를 인식한 후 모든 요소들을 다시 렌더링해준다.

그러므로 Profile에서 user id를 변경했을 때 Nav도 변화를 감지하기 위해서는

최상위 컴포넌트에서 props에 변화를 주면 된다.

즉 firebase의 정보로 react를 업데이트 해줘야한다.

 

 

최상위 컴포넌트.js

props로 Profile에 전달해주자.

프로필 업데이트 버튼을 눌렀을 때 실행될 함수이므로,

onSubmit에 메서드를 포함시킨다.

 

 

 

하지만 이 코드그대로 따라가보면 작동하지 않는다.

메서드가 잘 안되나 확인해보면 잘 작동한다.

(refreshUser을 선언할 때, setUserObj({displayName: 다른거})로 바꾸면 잘 작동하는 것을 확인 할 수 있다.)

메서드의 문제가 아닌데도 작동하지 않는 이유는

user의 크기가 너무나도 크기때문...

너무 비교대상의 크기가 클 경우 react가 헷갈릴 수 있다.

(이게 뭔소린가 싶지만 react가 새로운 상태인지 아닌지 알아채지 못한다...)

 

 

그래서 크기를 줄여주면 해결된다!

useObj에서 필요했던 프로퍼티와 메서드는

displayName, photoURL, uid, updateProfile 이었으므로,

user대신 필요한 정보만 모은 객체로 반환해주자.

 

 

 

😁😁😁