컴포넌트의 세가지 역할

1. 데이터를 다루는 영역
   1. 외부에서 주입받은 데이터
   2. 상태와 같은 내부 데이터 관리
2. UI (User Interface) ⇒ 디자인에 의존함.
   1. 사용자에게 데이터를 어떻게 보여질지를 정의
3. 사용자와 어떻게 상호 작용할지를 정의 (2번 UI를 기반으로)

<aside> ⭐ 2번 UI영역을 1번 컴포넌트가 관리하는 데이터와 분리하면 어떨까?!

</aside>

1. UI와 데이터 영역을 분리 feat. 커스텀훅

예시) 달력

• 달력을 데이터 영역과 UI로 나눠보자!
• 데이터 영역
  • 2x2 이차원 배열
  • 오늘 날짜 계산
  • useCalendar hooks

export default function Calendar(){
	const { headersm body, view } = useCalendar(); 
}

• Calendar 라는 컴포넌트는 useCalendar에서 반환된 데이터를 어떻게 보여줄지만 정의하면된다. ⇒ UI

  

  <aside> ⭐ 디자인이 다른 달력을 만들때도, useCalendar hooks를 가져다 사용할 수 있다.

  </aside>

  <aside> ⭐ 달력 데이터를 만드는 일은 useCalendar hooks에게 위임함.

  </aside>

2. UI와 사용자 영역을 분리

• 데이터 영역을 추상화 했던 것 처럼, 상호작용하는 부분을 추상화 해보자!

• 데이터 영역 분리와 마찬가지로, 상호작용하는 부분을 커스텀훅을 사용해서 UI와 분리했다.

<aside> ⭐ 이로써, UI는 어떻게 보여질지만 관심을 가지게 되면 되었다.

</aside>