ReactJS-클래스형 컴포넌트와 함수형 컴포넌트

과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해줘서 현재는 함수형 컴포넌트 사용을 권장한다.
컴포넌트는 단순한 템플릿 이상의 기능을 수행한다.
- 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것을 넘어, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 등 다양한 상황에 맞추어 작업들을 수행할 수 있다.
- 목적에 따라 프리젠테이션 컴포넌트와 컨테이너 컴포넌트로 나누기도 한다.

1. 클래스형 컴포넌트

1-1) 선언 방식

class 키워드가 필요
Component 를 상속 받아야 한다.
render() 메서드가 반드시 있어야 한다.

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

1-2) 특징

state, lifeCycle 관련 기능을 사용할 수 있다.
메모리 자원을 함수형 컴포넌트보다 더 사용한다.
임의 메소드를 정의할 수 있다.

1-3) 기능

state

컴포넌트 내부에서 바뀔 수 있는 값

constructor 안에서 this.state 초기 값을 설정할 수 있다.

import React, {Component} from 'react';
       
class App extends Component {
  constructor(props) {
	super(props);
           
    this.state = {
        name: "",
        age: "",
    }
  }
           
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}
       
export default App;

constructor 없이 state 초기값을 설정할 수 있다.

import React, {Component} from 'react';
       
class App extends Component {
  this.state = {
  	  name: "",
      age: "",
  }
           
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}
       
export default App;

클래스형 컴포넌트의 state는 객체 형식이다.
- ```
this.state = { name: "", age: "" }
```

this.setState 함수로 state 값을 변경할 수 있다.

onClick={() => {
    this.setState({num: num+1})
}}

props

컴포넌트 속성을 설정할 때 사용하는 요소
읽기 전용이다.
컴포넌트 자체에서 props를 수정하면 안된다.

this.props로 값을 불러 올 수 있다.

class MyComponent extends Component {
  render() {
    const {name, favoriteNumber, children} = this.props;
    return (
    	<div>
        	My name is {name}.<br/>
            children value is {children}.<br/>
            My favoriteNumber is {favoriteNumber}.<br/>
        </div>	
    );
  }
}

LifeCycle
- LifeCycle 함수는 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어 상태를 업데이트하기 전 후로 실행되는 메서드들이다.
- constructr(), componentWillMount(), componentDidMount(), render(), …

2. 함수형 컴포넌트

2-1) 선언 방식

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

2-2) 특징

staet, LifeCycle 관련 기능을 사용하지 못한다. → Hook 을 통해 해결됨
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.

2-3) 기능

state
- 함수형 컴포넌트에서는 useState 함수로 state를 사용한다.
- useState 함수를 호출하면 배열이 반환
  - 반환된 첫번째 원소는 현재 상태
  - 반환된 두번째 원소는 상태를 바꾸어주는 함수
  - const [message, setMessage] = useState('');

props

props를 불러올 필요 없이 바로 호출할 수 있다.

const MyComponent = ({name, children}) => {
	return (
    	<div>
        	My name is {name}.<br/>
            children value is {children}.<br/>
        </div>
    )
}