[이서용][08/20]

### 오늘은 어떻게 프로젝트에 기여했나요?

- 오늘은 랭킹 페이지에 팔로우 / 언팔로우 기능을 추가하였으며 api 연결을 테스트 하였다.

### 오늘의 프로젝트에서 느낀 점이나 기억에 남는 점은 무엇인가요? (필수 1개)

- 랭킹 페이지에서 로그인 모달 창을 열어 로그인을 완료한 후 다시 랭킹페이지로 돌아왔을 때 로그인 반영이 되지 않는 것을 발견하였다.
위와 같이 props로 받은 isLogin이 상위 컴포넌트인 HOME에서는 true로 업데이트 되었으나 하위 컴포넌트에서 반영이 되지 않았다. 그 이유는 컴포넌트를 index.js에서 상태로 관리하는 방식으로 구성하였기 때문이었다. 다음과 같이 상태를 렌더링 하는 시점에는 NAV에서 false인 isLogin을 props로 둔 컴포넌트가 상태로 담기기 때문에 이를 HOME에서 다시 새롭게 내려주어야 했다.

```js
export default function Home({ loginHandler, isLogin }) {

const [component, setComponent] = useState(); // 컴포넌트를 상태로 가진다

const componentHandler = (e) => {
setComponent(e);
};

return (

{component.type.name === 'Landing' ? : component }
// 여기서 랭킹 컴포넌트가 렌더링 되어도 props로 받을 isLogin은 과거 시점의 상태이기 때문에 업데이트가 되지 않았다.
{isLoginOpen
?
: null
}

componentHandler(e)}
isWhite={isWhite}
loginOpenHandler={loginOpenHandler}
colorHandler={colorHandler}
isLogin={isLogin} // 여기서 내려준 isLogin이 랭킹 버튼을 클릭하였을대 랭킹 컴포넌트에 보내지도록 설정하였다.
loginHandler={loginHandler}
/>

);
}
```

변경 후
```js
{component.type.name === 'Landing'
?
: component.type.name === 'Ranking' // 컴포넌트가 랭킹인 상황을 추가하고 isLogin props를 새롭게 내려주었다.
?
: component
}
```

컴포넌트 자체를 상태로 보관하면서 이리저리 이동시키다 보니 이러한 예상치 못한 문제가 발생하는 것 같다. 이 방식이 좋은 방식인지 다시 한 번 생각해 보게 되었다.

- 또 다른 문제로 실제 배포 시 게임 안에서 정상 작동하던 component.type.name 변수를 찾지 못하는 현상이 발생하였다. 이는 webpack이 청크를 만들면서 컴포넌트에 새로운 이름을 붙여서 기존 방식이 작동하지 않는 것이 원인으로, 컴포넌트 자체를 이름을 포함한 배열 형태로 내려주어 일단 해결하였다.
```js
const [component, setComponent] = useState(
[ 'Landing', ]
);
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] Mypage api 연결