예제를 통해 배워보자.
리액트 프로젝트는 전에 말했듯이, 여러 컴포넌트로 이루어져있다. 따라서 앱을 설계할때 컴포넌트 단위로 앱이 어떻게 구성될지 설계해야 한다.
우선 가장 부모 컴포넌트를 정한다. 위에서는 App Component가 된다.
그 자식으로 ExpenseForm과 ExpenseList를 만든다. ExpenseList내에는 ExpenseItem이라는 여러 자녀 컴포넌트가 들어간다..
자 이제 해보자!
우선 index.js를 제외하고, index.css, App.js, App.css를 깔끔하게 다 지워버리자.
컴포넌트를 만드는 방법에는 전에 말했던 것 처럼 클래스형과 함수형이 있다. 오늘날에는 함수형만 주로 쓴다고 했지만, 클래스형부터 해보고, 이를 함수형으로 리팩토링하는 과정을 거쳐보자..
리액트에서 클래스를 이용해 컴포넌트를 만들려면, 우선 Component를 상속받는 클래스로 시작한다.
클래스 컴포넌트가 render() 메서드를 사용할 수 있는건 Component 를 상속받았기 때문이다.
import { Component } from "react";
class App extends Component {
}
여기서부터 시작한다.