prerequisite

+ 함수 선언문과 함수 표현식

+ 익명함수와 애로우 펑션

+ 함수 호출과 생성자 함수

+ 자바스크립트 this 의 세가지 의미

preview

component 개요

component는 UI를 독립적이고 재사용 가능한 조각으로 분리시켜준다. 컴포넌트에는 function component 와 class component 두가지가 있다. class 컴포넌트는 좀 더 많은 기능을 가지고 있지만 리액트에서는 되도록이면 function 컴포넌트 사용을 권한다. 왜냐하면 class 컴포넌트는 React.Component라는 부모 클래스를 상속받았기 때문에 더 많은 기능을 가지고 있고 더 많은 기능이 있다는것은 그만큼 메모리와 리소스를 더 사용한다는 의미이다. 뒤에서 class 컴포넌트를 다루고 여기서는 function 컴포넌트만 다룬다. function 컴포넌트는 props를 주입해서 JSX를 리턴하는 기능을 수행한다.

개념적으로 컴포넌트는 자바스크립트 펑션과 같다. props 라는 input 파라메터를 받아서 화면에 보여주는 UI인 React Element 를 리턴한다.

Q: function component는 함수 호출인가? 생성자함수를 호출한것인가?

Q: class component 생성자 함수를 호출한것인가?

function component

여기서부터 scoreboard 애플리케이션을 만들어보자.

JSX 태그는 html 엘리먼트 뿐만 아니라 user-defined 컴포넌트로도 구성이 될 수 있다. 컴포넌트란 재사용이 가능한 UI 모음이다. 컴포넌트를 만드는 방법은 함수로 만드는 방법과 class 로 만드는 두가지 방법이 있는데, 제목과 플레이어 수를 나타내는 헤더 컴포넌트를 function으로 만들어보자.

function 컴포넌트를 만들때 첫글자는 대문자로 만든다.

render 펑션에 컴포넌트를 배치하는 방법은 두가지 규칙이 있다. 먼저 대문자로 명시한다. 소문자는 html 태그이고 대문자는 리액트 컴포넌트를 의미한다. 그리고, 닫는 태그는 반드시 있어야 하는데 자식 노드가 없을때는 self closing 태그로 닫는다. 컴포넌트 블락을 사용하면 createElement를 호출하게 된다. 온라인 babel 에서 확인해보자.

React Element의 첫번째 요소가 컴포넌트이면 아래와 같은 순서로 렌더링이 된다.

  • Header 펑션 컴포넌트를 호출한다.
  • 만일 속성이 있다면 속성을 json으로 전달한다.
  • name=”ldk” 라면 {name: ‘ldk’} 가 펑션호출시 파라메터로 전달된다.

익명함수는 애로우 펑션으로 나타낼수 있다. 애로우 펑션과 함수 표현식을 사용하여 간단하게 표현하면 아래와 같다.

Header 컴포넌트 하단에 Player 컴포넌트를 작성해보자.

컴포넌트를 만들어야 할지 말아야 할지의 판단은 지극히 주관적이다. 분명한 것은 재사용이 필요하다고 느껴지면 컴포넌트를 만드는것이다. 너무 많은 컴포넌트를 만드는것도 번거로울수 있다. counter 부분을 별도의 컴포넌트로 만들면 다음과 같다.

전체를 감싸는 App 컴포넌트를 추가한다.

– note

– ToDo

bootstrap으로 만들어진 페이지를 리액트 컴포넌트로 분리해보자. 컴포넌트 트리는 다음과 같다.

  • TodoApp
    • TodoHeader
    • TodoForm
    • TodoList
      • Todo

See the Pen React todo List by LeeDongKee (@eastflag) on CodePen.default

– quiz 1

– quiz 2