2020-12-03 :: State

State

props은 부모 컴포넌트로부터 상속받는 것으로 읽기 전용이다 때문에 컴포넌트 내부에서 변경할 수 없지만, state는 컴포넌트 내부에서 변경할 수 있다. state는 원래 클래스형 컴포넌트에서만 사용 가능했지만 Hooks의 useState라는 함수를 통해 함수형 컴포넌트에서도 사용 가능하게 되었다. 컴포넌트의 state는 객체 형식이어햐 한다.

const { value } = this.state; //state의 비구조화 할당.

state는 아래와 같이 constructor 밖에 선언할 수 있다.

class Counter extends Component { state = { number: 0, fixedNum: 0 }; ... }

this.setState()에 객체 대신 함수 전달하기

this.setState()을 이용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트된다. 따라서 onClick()함수 안에 다음과 같이 this.setState()를 두 번 사용해도 값에서 +1밖에 이루어지지 않는다.

onClick() => { this.setState({number: numberr +1 }); this.setState({number: numberr +1 }); }

이런 문제를 해결하기 위해서는 this.setState()안에 객체 대신 함수를 인자로 전달하면 된다. 기본형은 다음과 같다.

this.setState((prevState, props) => { return { //업데이트하고 싶은 내용 } })

이 구문을 이용해서 처음 문제를 해결해보겠다.

onClick() => { this.setState(prevState => ({ number: prevState.number + 1 )}); this.setState(prevState => ({ number: prevState.number + 1 )}); }

this.setState()가 끝난 후 특정 작업 실행하기

setState를 사용하고 바로 다음 특정 작업을 실행하고 싶다면 setState의 두 번째 인자를 이용하면 된다.

this.setState({number: number +1}, () => {console.log('state is changed!')});

함수형 컴포넌트에서 useState 사용하기

useState는 state를 함수형 컴포넌트에서도 사용할 수 있게 하는 매서드이다. 이 과정에서 Hooks을 사용하게 된다.

배열 비구조화 할당

const arrary = [1, 2]; const one = array[0]; const two = array[1];

위의 코드는 아래 코드로 대체할 수 있다.

const array = [1, 2]; const [one, two] = array;

useState 사용하기

useState의 사용방법은 배열의 비구조화 할당과 닮아있다. 먼저 코드를 통해 어떤 형태를 가지는지 보자.

import react, { useState } from 'react'; const Say = () => { cosnt [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕히세요'); const onClickLeave = () => setMessage('안녕히가세요'); ... }

useState 함수의 인자에는 상태의 초깃값을 넣어 준다. 클래스형 컴포넌트에는 state 초깃값으로 반드시 객체를 넣어주어야 하지만 useState에는 객체가 아니어도 상관없다.

useState()를 호출하면 배열이 반환된다. 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어주는 함수이다. 이런 함수를 setter 함수라고 부른다. 배열 비구조화 활당을 통해 자유롭게 이름을 정할 수 있다.

한 컴포넌트에서 useState 여러 번 사용하기