TIL 5/29

  • 자바스크립트 면접 스터디에 다녀옴
    • 라이브러리의 소스 코드들을 한번 공부 해보고싶다는 생각이 들었다.

배운 것 : 객체 타입의 state를 setState 하는 법.

  • 각 페이지의 화면 상태를 'open', 'close', 'min' 중 하나를 가질 수 있게 하였다. 처음으로 state의 값으로 객체 타입을 사용해보았다.
    // NO !
    this.setState({windowStatus['About'] : 'close'}) 
    // 새로운 객체 할당
    let windowStatus = Object.assign({}, this.state.windowStatus);
      windowStatus[window] = 'min';
      this.setState({windowStatus});
    // ES6 
    this.setState(prevState => ({
    windowStatus : {
      ...prevState.windowStatus,
      About : 'min'
    }
    }))
    바로 해당 프로퍼티에 접근하여 값을 변경할 수 없고 새로 객체를 만든 후 새로운 값을 할당해주고, 변경 해주고 싶은 객체 전체를 다시 새로운 값으로 할당해야했다.

구현 한 것

최상단(App) 컴포넌트에 state를 두고 window header의 -, x 버튼들로 화면을 껐다키게 할 수 있게 만들었다.

    • window header btn을 통해서 끄고 크기 ✔️
    • open 상태에 따라 bar에서 btn 나타내기
    • 다하면 BYOMLogin layout 수정, MusicListContainer 수정