[Project] 재생화면으로 이동 시, 디폴트 값이 "가사" 항목

1. 문제

여느덧 평화롭게 프로젝트를 만들던 중.. 

 

이때까지 발견 못 한 문제를 발견하게 되는데?!

 

재생화면으로 이동 시, 가사 항목에 가사, 재생목록이 함께 나옴

 

어머나... 재생목록으로 이동 했을 때, 가사 항목에 불필요한 재생목록까지 같이 나오는 것!

 

내가 의도했던 것과 다르게 작동하는 것을 발견했다.. 

 

어떻게 해결할까....?

---

2. 해결법

(1) componentDidMount를 쓸까?

 

 "컴포넌트 실행 시, 바로 적용이 되어야 한다"는 점에 초점을 맞춘 나는, 불현듯 componentDidMount가 생각났다. 

 

하지만 이 오류를 해결하는데 componentDidMoutn는 적합하지 않다고 판단했다. 

 

(2) document.getElementById('playlistArea').style = "display:none";

 

react 파일에 document.getElementById('playlistArea').style = "display:none"; 을 넣었다.

 

가사와 재생목록을 왔다갔다하는 토글 형식의 버튼을 만들 때, 이 방식을 사용했기 때문이다.

 

처음에 실행했을 땐, 잘 적용되었지만 그 이후로는 그 전 상태와 똑같았다...

 

하 왜 안 풀리지?!

 

(3) 해당 파일의 css에 display:none; 넣기

 

어머 해결했다 !!

 

이렇게 쉬운 방법이었다니...

 

내 프로젝트는 가사 구역 과 재생목록 구역을 공유하고 있다.

 

즉, 가사가 공유 구역을 사용할 때는 재생목록의 컨텐츠를 숨긴다.

 

재생목록이 공유 구역을 사용할 때는 가사의 컨텐츠를 숨긴다.

 

이에 따르면, 디폴트 값을 "가사"로 설정하고 싶은 것이니 "재생목록"의 디폴트 값은 숨김으로 설정하면 된다!

 

 

이제 내가 원하는 대로 잘 작동한다 !

 

재생화면으로 이동 시, 가사 항목에 가사만 나옴