3장 : 컴포넌트

3.4 : state

state는 바뀔 수 있는 값.
props는 부모 컴포넌트가 설정, 읽기 전용

클래스형 컴포넌트의 state

class Counter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			number: 0,
		};
	}
	render() {
		const { number } = this.state;

		return (
			<>
				<div>{number}</div>
				<button
					onClick={() => {
						this.setState({ number: number + 1 });
					}}
				>
					plus
				</button>
			</>
		);
	}
}

생성자 부분 설명

constructor(props) {
		super(props);
		this.state = {
			number: 0,
		};
	}

• 클래스형 컴포넌트에서 생성자를 작성할 때 반드시 super(props)를 호출
• 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 Component 클래스가 가진 생성자 함수를 호출
• 그다음 this.state의 초깃값을 설정 (객체 형식)

render 함수 설명

• this.state로 state 조회
• this.setState를 사용회 새로운 값 삽입 가능

State값 안에 여러 값이 있을 때

• this.setState 안에 안바뀌는 값 그냥 안 넣으면 됨

State를 생성자에서 꺼내기

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

• constructor 메서드를 선언하지 않고도 state 초기값 설정 가능

this.setState에 객체 대신 함수 인자 전달하기

this.setState({ number: number + 1 });를 두 번 호출해도 1씩 더해짐

상태가 비동기적으로 업데이트됨

동기적(Synchronous)

어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식

비동기적(Asynchronous)

어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식

출처 https://velog.io/@emawlrdl/%EB%8F%99%EA%B8%B0%EC%A0%81-vs-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81

• 해결책으로 함수 인자를 전달

this.setState((prevState,props) => {
              업데이트할 내용              
});

• props 생략 가능

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

• 위 아래는 동일한 코드, 아래는 바로 객체를 반환하다는 의미

setState가 끝난 후 특정 작업 실행하기

값을 업데이트하고 난 다음 특정 작업을 하고 싶을 때 setState의 두번째 파라미터로 콜백 함수를 등록하여 작업 처리 가능

this.setState(
	{number : number +1}, 
    ()=>{console.log("두번째인자"}
    );

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

오 이제 잘 아는 부분 ㅎㅎㅎㅎ

리액트 Hooks를 사용하여 useState사용

배열 비구조화 할당

ㅎㅎ이제 이것도 알징

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

이것을 배열 비구조화 할당해서

const [one,two] = array;

이렇게~
ㅇㅋㅇㅋ 이해 완료 그럼 적용 ㄱ ㄱ

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

• 초깃값을 넣어주기
• 객체 아니어도 상관 ㄴㄴ
• 배열이 반환됨
• 첫 번째 원소는 현자 상태 = message
  두 번째는 상태를 바꾸어 주는 함수(세터:Setter) = setMessage

state 사용할 때 주의사항

• state의 값을 변경 할 때 setState를 통해 전달받은 세터 함수를 사용해야 함