컴포넌트 제작 실습

React 학습에 앞서 컴포넌트 제작 실습

비주얼 디자인 분석

제공 된 디자인 예제 파일을 분석해 브라우저에 UI를 렌더링 하는 실습을 진행합니다.

디자이너 ⇨ 개발자 프로세스

디자인 시안을 분석해 최대한 비슷하게 UI 스타일링 해야 합니다. 디자이너는 시안과 결과물이 다를 경우 매우 민감하게 반응합니다. 실제로 디자이너와 개발자 사이에 발생하는 갈등은 이러한 경우가 대부분입니다. 오죽 답답하면 디자이너가 개발자 대신 코딩하겠다며 배우러 올까요? 😩

그러니 제공 된 디자인 시안과 최대한 비슷하게 컴포넌트 스타일을 작성해보길 바랍니다.

DOM API ➕ ES 6+

HTML 하드 코딩 대신, DOM 표준 API를 사용해 동적으로 업로드 버튼 컴포넌트를 브라우저 화면에 렌더링 해봅니다.

API	설명
createElement	요소 노드 생성
createTextNode	텍스트 노드 생성
setAttribute	요소 노드 속성 쓰기
getAttribute	요소 노드 속성 읽기
dataset	커스텀 속성 읽기/쓰기
classList	class 속성 읽기/쓰기
appendChild	노드의 마지막 자식 노드로 삽입
insertAdjacentElement	노드의 특정 위치에 (형제 또는 자식) 노드 삽입
addEventListener	노드에 이벤트 리스너 연결
removeEventListener	노드에 연결된 이벤트 리스너 제거

숙련도 설문 결과

오리엔테이션 설문 ES 6+, ES Next 숙련도 설문 결과입니다.

라이브 예제

커스텀 DOM 모듈

커스텀 DOM 모듈을 사용해 업로드 버튼 컴포넌트를 브라우저 화면에 렌더링 합니다.

DOM 모듈 API

// ------------------------------------------------------
// 버튼 요소 노드 생성

const uploadPendingButton = DOM.createElement(
  // 요소 이름 (string)
  'button',
  // 요소 속성 (object)
  {
    type: 'button',
    className: 'button button__upload button--pending',
    onClick() { console.log('파일을 업로드 중입니다...') },
  },
  // 요소의 자식들 (children[])
  '업로드 중',
  // ...
)


// ------------------------------------------------------
// DOM 렌더링

DOM.render(
  // 프로그래밍 방식으로 생성 된 요소 노드
  uploadPendingButton,
  // HTML 문서에 하드 코딩 된 실제 DOM 요소 노드
  document.getElementById('root')
)

라이브 예제

클래스 프로그래밍

UploadButton 클래스(class)를 작성해 다음과 같은 API로 작동되도록 구현해봅니다.

클래스 API

import DOM from './modules/DOM'
import UploadButton from './components/UploadButton'

// -----------------------------------------------------------------

const uploadButton = new UploadButton({
  status: 'pending'
})

// -----------------------------------------------------------------

function render() {
  DOM.render(uploadButton.render(), document.getElementById('root'))
}

이전 실습 지연으로 수업 시간이 부족할 경우, 클래스로 만드는 학습은 과제로 작성한 후 제출합니다.

라이브 예제