클래스형 컴포넌트
state 기능 및 라이프사이클 기능을 사용할 수 있는 것이 함수형 컴포넌트와의 차이점입니다.
함수형 컴포넌트
선언하기 편하고, 메모리 자원을 덜 사용한다는 장점이 있습니다.
선언된 this가 종속된 객체를 가르킵니다.
화살표 함수
함수형 컴포넌트의 한 종류로, 함수를 파라미터로 전달할 때 유용합니다.
선언된 this가 종속된 인스턴스를 가르킵니다.
공식 메뉴얼에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장합니다.
상태(state)
리엑트에서 상태는 변화할 수 있는 값을 나타냅니다.
클래스형 컴포넌트의 상태
1. constructor로 매서드를 작성합니다.
1-1. constructor을 사용할 때는 꼭 super(props)를 호출해야 합니다.
1-2. this.state에 초기값을 선언합니다.
=> 아래쪽 이미지처럼 constructor를 사용하지 않고도 클래스 형으로 사용할 수 있습니다.
2. render에서 state를 변경합니다.
2-1. this.state로 상태를 부릅니다.
2-2. onClick하여 setState가 실행될 수 있게 합니다. setState로 상태를 변경할 수 있습니다.
3. 컴포넌트가 끝난 후 바로 실행하게 하고 싶은 작업이 있는 경우 setState의 두번째 인자로 콜백함수를 넣어줍니다.
3-1. this.setState({number : number+1}, () => {console.log("여기에 실행하려는 작업을 입력")})
useState를 사용한 상태
1. useState hook을 사용하여 상태를 관리할 수 있습니다.
1-1. setText('값') 형식으로 상태를 업데이트 할 수 있습니다.
