함수 컴포넌트와 가장 큰 차이는 아래와 같습니다.
클래스형 컴포넌트는 render()가 필수이고, 그 안에서 JSX를 반환합니다.
그럼에도 함수형 컴포넌트를 쓰는 이유
일반 함수 / 화살표 함수
일반 함수에서의 this는 자신이 종속된 객체를 가리키고,
화살표 함수에서의 this는 자신이 종속된 인스턴스를 가리킵니다.
properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정합니다.
props의 기본 값을 지정하려면 defaultProps를 사용하면 됩니다.
MyComponent.defaultProps = {
name: "default",
};
const MyComponent = {name,children} =>{
return (<div/>)
} ```
처럼 사용하는 거.. 알죠?
컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
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의 생성자 함수들을 호출해줍니다.
this.state = { number: 0 };
const { number } = this.state;
this.setState({number:number + 1})
this.setState 의 두번째 인자로 함수를 넣으면 state가 바꼈을 때 호출이 된다.
클래스형에서의 컴포넌트에서는 state가 객체 형태였습니다 .
하지만 useState는 어떠한 형태여도 상관없습니다.
함수를 호출하면 배열이 반환됩니다.
첫번째 원소는 현재 상태이고, (getter)
두번째 원소는 상태를 바꿔주는 함수입니다. (setter)
리액트 개발팀은 함수형의 형태로 useState를 사용하는 것을 권장했습니다.