목차

<aside> 💡 컴포넌트를 설계할 때, 컴포넌트 간의 의존성을 가지지 않도록 생각하고 설계하기

</aside>

1. 컴포넌트 방식으로 생각하기

1-1. 컴포넌트 방식으로 생각하기란

컴포넌트란

• UI를 선언적으로 표현하기 위해, 표현 부분을 추상화한 것
  • <TodoForm / >은 투두리스트 앱에서 폼을 제출하는 동작이 표현되어 들어가있다.
• 독립적으로 기능할 수 있도록 묶어놓은 단위
  • 투두리스트 앱 → TodoList > TodoForm > Header 의 조합
• 하나의 컴포넌트에 관련 기능이 묶이기 때문에, 특정 기능의 추가/수정 개발 시 해당 컴포넌트를 찾아 쉽게 수정/개발 할 수 있다.
• 컴포넌트는 여러개의 다양한 데이터를 반영한 컴포넌트로 재생성이 가능하며, 서로의 컴포넌트의 간섭을 주지 않는다.

1-2. 실습 - simpleTodoList 작성

컴포넌트

<TodoList>

• <TodoForm>에서 제출된 할 일을 화면에 보여주는 컴포넌트
• params.$target - 컴포넌트가 추가 될 DOM 엘리먼트
• params.initialState - 컴포넌트의 초기 상태

render함수

• 명령형 방식: for문을 순회하며, html에 <li> 추가 후 innerHTML 변경
• 선언형 방식: innerHTML은 state를 map으로 순회하며 <li>를 join 한 것을 리턴

<TodoForm>

• 투두리스트에 할 일을 추가하는 동작을 담당하는 컴포넌트

onSubmit 함수를 외부에 선언하여 인자로 넘기기

• e.preventDefault()
  • form태그의 경우 제출 시 항상 새로고침 되므로, 이를 방지하기 위함
• isInit 변수로 이벤트 바인딩 관리
  • render 될 때마다 실행되는 것을 방지하기 위해서

Tip

• object구조분해할당 하여 TodoList({$target, initialState})로 바로 사용하기
• <script /> 의 위치
  • body태그 아래쪽 (script실행 동안 브라우저렌더링 멈추기 때문에, 빈화면 보여주지 않기 위해서)
  • 루트 script가 가장 아래쪽에 위치하도록 (위쪽의 js파일 부터 읽어지기 때문)