• 현재 React를 이용하여 파티에 참가한 사람들이 실시간으로 음악을 올릴 수 있는 웹을 만들고 있다. 오늘은 DJ가 선택한 곡이 사용자들의 플레이리스트에 '현재 재생되는 곡'으로 표시되는 걸 구현하였다.
    '현재' 재생되는 곡에만 글씨에 색을 바꾸고, 이전에 재생 되었던 건 다시 원래 기본값으로 돌아가게 구현해야하는 부분이 좀 까다로웠다. Playlist 랑 Music 컴포넌트의 state와 props로 오래 고민을 하다가 딱 한 줄의 코드가 나왔고 다행히 잘 동작을 했다. 만약 리액트가 아니라 Vanila JS로 구현했다면 어떻게 해야했을까.. 쉽사리 생각나진 않는다. state랑 props이 주는 힘이 참 대단한 거 같음!

  • 처음에는 SCSS 를 쓰다가 자꾸 import 해야되는게 귀찮아서 styled-components로 바꾸고, render 메소드에 <div> 들이 잔뜩 있는게 보기가 싫어져서 하나의 컴포넌트를 Container, Presenter 나누었었다. 근데 간단한 컴포넌트여서 그런지 오히려 나누었더니 props로 받은 걸 Presenter로 또 전달해줘야했다. 보기에 무슨 컴포넌트 인지도 잘 모르겠고 더더 복잡해지는 거 같아서 다시 하나로 합친 코드도 만들어서 비교해보았다.🧐

Presentation Comonent, Container Component
Presentation Component는 어떻게 보여지는와 관련이 있는 컴포넌트, Container Component는 어떻게 동작하는지와 관련있는 컴포넌트이다. 이렇게 컴포넌트를 나누면 컴포넌트를 재사용하기 쉬워진다. 상태값이 완전히 다르더라도 같은 UI가 필요한 곳에서 프리젠테이션 컴포넌트를 사용할 수 있다. 예) Presentation : 페이지, 사이드바 / Container : 유저페이지, 팔로워 사이드바 [출처]

좀 더 규모가 큰 프론트를 만들 때 더 적합한 방법인 거 같다.

  • 드디어 스터디원을 구했다! 예이!