State

- 클래스형 컴포넌트가 지니고있는 state

- 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state

 

1) 클래스형 state

- 알아야 할 점

 1. constructor : 컴포넌트의 생성자 메서드, 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시

    super(props)를 호출해 주어야 한다.

 2. this.setState

 

- constructor 적용

클래스형 state 코드

 

2) 함수형 컴포넌트에서 useState

- 알아야 할 점

 1. 배열 비구조화 할당

 2. useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다. 클래스형 컴포넌트에서의 state 초깃값은 객체 형태를 넣어 주어야 한다고 배웠지만, useState 에서는 반드시 객체가 아니어도 상관없습니다. 값의 형태는 자유이며, 숫자, 문자, 객체, 배열일 수도 있습니다.

함수를 호출하면 배열이 반환되는데요. 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수입니다. 이 함수를 세터(Setter) 함수라고 부릅니다. 그리고 배열 비구조화 할당을 통해 이름을 자유롭게 정해줄 수 있습니다.

 

함수형 컴포넌트 State

++ 추가적으로 )

객체에 대한 사본을 만들 때는 spread 연산자라 불리는 ... 을 사용하여 처리하고, 배열에 대한 사본을 만들 때는

배열의 내장 함수들을 활용합니다.

EX)

출처&참고: 도서 - 리액트를 다루는 기술 중