디스크 자키 같네요

이쁜 UI 하나 보고 가시죠.

오늘 소개해 드릴 프로젝트는 Music-Player입니다. 안드로이드용 Music Player 를 만든 것은 아니구요. 실제 프로그램이 음악을 틀어주지는 않습니다. 누군가가 fork를 뜬다면 모를까.

andremion/Music-Player
_Music-Player - From UI Proposal to Code_github.com

진짜 실행되는 뮤직 플레이어도 아닌데 왜 소개를 하느냐구요?

출처 : https://twitter.com/dr_kritz

한번 이야기를 들어 보시죠.

dribble에 774명의 팔로워를 가진 Anish라는 사람이 있습니다.

(이미지를 클릭하면 페이지로 이동합니다._

꽤나 감각적인 페이지들이 많은데 그 중에 하나 뮤직 플레이어가 있습니다. 그 컨셉 화면을 보고 이뻐서 바로 android 코드로 바꿨습니다.

Material 디자인을 입히면 이런게 되~ 라고 하는 정도의 커멘트를 남긴 걸 보고 말이죠.

근데, 거기서 끝나지 않습니다.

Music Player: From UI Proposal to Code
_How would be to code an UI proposal, skipping some basic Android details and focusing in the transition and animation…_stories.uplabs.com

내가 왜 이걸 만들었냐 하면 말야. 안드로이드에서 Material 디자인 코드 짜는게 어렵다고 하는 친구들이 있더라고 말야.그래서 프로젝트를 만들었고 여기 어떻게 만드는지 자세하게 써 놓았으니 참조해

라고 블로깅을 죽죽 내려갑니다.

레이아웃은 이렇게 만들고

(중략… 사이트 가서 확인하세요~)

UI 는 이렇게 만들고

뭐 이런 식으로 말이죠.

어때요? UI 디자인 만들기 참 쉽죠잉?

실행

$git clone [https://github.com/andremion/Music-Player.git][anchor6]

을 받고 안드로이드 스튜디오에서 실행을 시켜 주면

화면과 같이 실행이 됩니다.

By Keen Dev on July 11, 2016.

Exported from Medium on May 31, 2017.

React 사이트에서 정의를 따라 DOM혹은 페이지 위에 올라갈 때를 mount, DOM트리에서 삭제되거나 웹 페이지에서 없어질 때를 unmount로 정의합시다.

또한 mount 와 unmount 사이에는 여러가지 생명 주기 함수들이 동작할 것인데, state와 props는 이 함수들과 밀접하게 연관이 있습니다. props는 컴포넌트의 속성을 나타내는 변수 값을 담는 객체입니다. state는 컴포넌트 상태를 나타내는 변수 값을담는 객체입니다. 이 값들의 변화에 따라 컴포넌트는 일종의 동작을 해야 하고(생명주기 함수) 혹은 그 변화의 끝에 다시 컴포넌트를 그려줘야 할 일들이 생깁니다.(render)

다음과 같이 생명주기를 나뉘어서 컴포넌트의 상태 변화를 확인해 볼 수 있을 거 같습니다.

• mount 될 때
• property 가 변화될 때
• state가 변화될 때
• unmount 될 때
• 전체 보기

이전 React 컴포넌트를 설명할 때에

componentDidUpdate,  
componentWillMount,  
componentWillReceiveProps,  
componentWillUnmount,  
componentWillUpdate 등은 바로 뒤에 다룰 생명주기 함수들과 연관이 있습니다

라고 이야기 했습니다. 각각의 미리 선언된 속성들을 개발자 도구에서 확인해 볼 수 있겠죠?

그러면 실제로 React 클래스를 생성해서 컴포넌트를 Mount 를 하고 어떻게 동작하는지를 확인해 보겠습니다.

(중략)

REACT 컴포넌트 생명 주기
_지난 번 글에 대해 피드백을 많이 주셨습니다. 너무 감사합니다. Bind 에 관련해서 다뤄봤으면 하는 부분은 조만간 다루도록 하겠습니다. Stateless 함수의 Airbnb의 입장에 대해 어느 정도 갑론 을박도…_devpools.kr

By Keen Dev on July 10, 2016.

Exported from Medium on May 31, 2017.