컴포넌트의 종류

• Class type
• Function type

Class type의 특징 (Function type에는 x)

• state 기능 및 Life Cycle API 이용 가능
  => 이제 function type에서도 Hook을 통해 가능해짐
• 무조건 render() 를 써야함

props

-컴포넌트의 속성을 설정할 때

단 부모 컴포넌트 (App in this example)에서만 값 설정 가능
컴포넌트 자신은 읽기 전용으로만 접근 가능

import MyComponent from "./MyComponent"; //.tsx 생략해야 에러 안생김

export default function App() {
  return (
    <div>
      <MyComponent age={13}>리액트</MyComponent>
    </div>
  );
}

import React, { ReactNode, Component } from "react";

interface MyComponentProps {
  name?: string;
  age?: number;
  children: ReactNode;
}

class MyComponent extends Component<MyComponentProps> {
  static defaultProps = {
    name: "James",
    age: 0,
  };
  render() {
    return (
      <div>
        <h1>안녕하세요</h1>
        {this.props.children}
        <div>
          저는 {this.props.name} {this.props.age}살 입니다.
        </div>
      </div>
    );
  }
}

export default MyComponent;

여기서 this. 키워드를 사용하는 이유는 state 가 class 의 member property(variable 이기 때문에)

state

Using useState in Function Component

참고! 자세하게 설명해주심

기본문법

const [message, setMessage] = useState('');

• useState()의 argument: state 의 default value
• first element in []: current state
• second element in []: setter function
• using destructuring

In CLASS component, default state value has to be in object shape.
In useState, it doesn't necessarily be.

useState

...
const [user, setUser] = useState({
    name: "홍길동",
    age: 20,
    school: "민국대학교",
  });
...

return(

<button onClick={() => {
  setUser({
    ...user,
    name: "홍길순",
    school: "한국대학교",
  });
...

spread 연산자로 카피하고 override 할 값만 뒤에 쓰자.

useState 사용 시 주의할 점

1. 반드시 컴포넌트 최상단 층위에서만 불러야 한다.
2. React '함수형' 컴포넌트 내부에서만 불러야 한다.
3. state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 세터 함수를 사용해야 한다. 아래의 코드는 ❌❌❌

//클래스형 컴포넌트에서...
this.state.number = this.state.number + 1;
this.state.array = this.array.push(2);
this.state.object.value = 5;

//함수 컴포넌트에서...
const [object, setObject] = useState({a: 1, b:2});
object.b = 2;