리액트에서 가장 중요한 개념 3가지는 component, state, props 이다. component는 재사용가능한 UI 조각이며 state는 component가 동적인 상태를 관리할 수 있게 해주며 props는 컴포넌트 사이에서 통신을 가능하게 해준다. 앞으로 이 세가지를 배우게 되는데 여기서는 첫번째인 component를 배우게 된다.
component 개요
component는 UI를 독립적이고 재사용 가능한 조각으로 분리시켜준다. 컴포넌트에는 function component 와 class component 두가지가 있다. 리액트 16.8에 hook이 도입되기 전까지는 state 를 가질 경우는 class 컴포넌트를 사용했고 state 를 가지지 않으면 function 컴포넌트를 사용했다. 즉, function 컴포넌트는 stateless 컴포넌트이다. 그러나 hook이 도입되면서 이제 state가 있는 경우도 useState라는 hook을 사용하여 state를 가질수 있게 되었다.
여기서는 상태정보가 없는 stateless function 컴포넌트를 다루고 그 다음에 state를 가질수 있는 class 컴포넌트를 배우고 그 다음에 hook을 다룬다. 이런 순서로 배워야 리액트의 역사 순서대로 배우는 것이고 제대로 이해하게 되는 것이다.
Q: function component는 함수 호출인가? 생성자함수를 호출한것인가?
Q: class component 생성자 함수를 호출한것인가?
function component
앞에서 만든 헤더를 구성하는 JSX를 function 컴포넌트로 만들어보자.
단순히 function 이 아니라 function 컴포넌트가 되기 위해서는 두가지 조건을 만족해야 한다.
- 첫글자는 대문자로 시작해야 한다.
- 반드시 React Element (or JSX) 를 리턴해야 한다.
JSX와 펑션컴포넌트와의 매핑관계는 다음과 같다.
- 펑션 컴포넌트의 이름을 JSX 엘리먼트의 이름으로 사용한다. 즉, JSX에 소문자로 사용되면 html 속성이 되고 대문자가 되면 컴포넌트로 인식한다. <header /> 라고 하면 html header 태그로 인식하고 <Header /> 로 사용하면 펑션 컴포넌트라고 생각하고 펑션 컴포넌트를 호출해서 React Element를 리턴받는다.
- 만일 속성이 있다면 모든 속성을 json으로 만들어서 컴포넌트의 첫번째 파라메터로 전달한다. 예를 들어, name=”ldk” 라면 {name: ‘ldk’} 로 json으로 만든 다음 펑션 컴포넌트 호출시 첫번째 파라메터로 전달한다. 펑션 컴포넌트에서는 보통 props라는 이름으로 이 파라메터를 받게 된다.
익명함수는 애로우 펑션으로 나타낼수 있다. 애로우 펑션과 함수 표현식을 사용하여 간단하게 표현하면 아래와 같다.
Header 컴포넌트 하단에 Player 컴포넌트를 작성하고 화면에 나타내보자.
컴포넌트를 어떻게 만들어야 할지 말아야 할지의 판단은 지극히 주관적이다. 분명한 것은 재사용이 필요하다고 느껴지면 컴포넌트를 만드는것이다. 너무 많은 컴포넌트를 만드는것도 번거로울수 있다. counter 부분을 별도의 컴포넌트로 만들면 다음과 같다.
이제, 전체를 감싸는 App 컴포넌트를 추가한 전체 코드는 다음과 같다.
+ ToDo
bootstrap으로 만들어진 페이지를 리액트 컴포넌트로 분리해보자. 컴포넌트 트리는 다음과 같다.
- TodoApp
- TodoHeader
- TodoForm
- TodoList
- Todo