클래스형 컴포넌트

---

함수 컴포넌트와 가장 큰 차이는 아래와 같습니다.

1. state 기능
2. 라이프 사이클 기능
3. 임의 메서드를 정의할 수 있다

클래스형 컴포넌트는 render()가 필수이고, 그 안에서 JSX를 반환합니다.

그럼에도 함수형 컴포넌트를 쓰는 이유

1. 선언하기가 편하다.
2. 메모리 자원도 덜 사용한다.
3. 결과물의 파일 크기도 더 작다.
4. hook을 사용할 수 있다.
5. 훅을 통해 state와 라이프 사이클도 사용이 가능해졌다.

일반 함수 / 화살표 함수
일반 함수에서의 this는 자신이 종속된 객체를 가리키고,
화살표 함수에서의 this는 자신이 종속된 인스턴스를 가리킵니다.

props

---

properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정합니다.

defaultProps

props의 기본 값을 지정하려면 defaultProps를 사용하면 됩니다.

MyComponent.defaultProps = {
  name: "default",
};

비구조화 할당 문법 사용

const MyComponent = {name,children} =>{
  return (<div/>)
} ```

처럼 사용하는 거.. 알죠?

state

---

컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.

클래스형에서 사용

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }
  render() {
    const { number } = this.state;
    return <button onClick={() => {
      this.setState(number:number + 1)
    }}>+1</button>;
  }
}

클래스형에서 constructor를 생성해줄 때 super(props)를 호출해줘야 합니다.
이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 Component의 생성자 함수들을 호출해줍니다.

state 초기화

this.state = { number: 0 };

state 사용

const { number } = this.state;

setState

this.setState({number:number + 1})

this.setState 의 두번째 인자로 함수를 넣으면 state가 바꼈을 때 호출이 된다.

함수형에서 사용

useState

클래스형에서의 컴포넌트에서는 state가 객체 형태였습니다 .
하지만 useState는 어떠한 형태여도 상관없습니다.

함수를 호출하면 배열이 반환됩니다.
첫번째 원소는 현재 상태이고, (getter)
두번째 원소는 상태를 바꿔주는 함수입니다. (setter)

리액트 개발팀은 함수형의 형태로 useState를 사용하는 것을 권장했습니다.