[React] state

State

컴포넌트 내에서 바뀔 수 있는 값을 의미

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값,

props를 바꾸려면 부모 컴포넌트에서 바꾸어야 함

2021.10.15 - [웹/React] - [React] Component & props

두 가지의 state가 있는데, 함수형 컴포넌트에서 usestate와 클래스형 컴포넌트 state

 

---

destructuring

var [a,b] = [10, 100]
array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 사용
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

destructuring(구조 분해) 사용법

 

usestate
동적인 값을 상태, 변수 대신 쓰는 데이터 저장공간

import React, { useState } from 'react'; 선언을 하고
useState() 로 사용할 수 있다
const [ state 데이터, state 데이터 변경 함수] = usestate(0);
let [글제목, 글제목 변경] = useState(['42서울', '서초 클러스터', '개포 클러스터']);
문자, 숫자, array, object 다 저장가능

데이터를 왜 state로 저장해야 하는가?
웹이 App처럼 동작하게 만들고 싶어서,
state가 변경되면 HTML 자동으로 재렌더링이 된다. (새로고침 없이도 HTML 반응)
자주 바뀌는 , 중요한 데이터를 변수말고 state 저장

---

이벤트
onClick={클릭될 때 실행할 함수}
onClick={()=>{실행할 내용}} //arrow function

arrow function : 함수표현의 간편한 대안

useState()를 통해서 위와 같은 onClick을 사용을 하려고 한다.
버튼을 누르면서, 동적으로 변화를 만들기 위함으로
let[좋아요, 좋아요변경] = useState(0) 을 사용하게 되면, 좋아요의 초기값은 0으로 시작

위와 같이 💕 을 누르게 되면 우측에 있는 숫자가 재렌더링 되게 된다

---

버튼 클릭으로 array의 내용을 변경을 하고자 한다면,

위와 같은 형식으로 기존 state 복사를 하여 수정 사항(정렬, 내용 변경 등)을 넣고, 변경함수에 집어넣으면 완성

deep copy 혹은 reference data type 관해서 알아두기

2021.10.15 - [웹/React] - [React] spread operator & deep copy

---

클래스형 State

import React, {Component} from "react";

class Counter extends Component {
	constructor(props) {
		super(props);
		this.state = {
			number: 0,
			fixedNumber: 0
		};
	}
	render() {
		const {number, fixedNumber} = this.state;
		return (
			<div>
				<h1>{number}</h1>
				<h2>바뀌지 않는 값: {fixedNumber}</h2>
				<button onClick={()=>{
					this.setState({number: number + 1});
				}}
				>
					+1
				</button>
				<button onClick={()=>{
					this.setState({number: 0});
				}}
				>
					reset
				</button>
			</div>
		);
	}
}

export default Counter;

constructor

• 컴포넌트의 생성자 메서드
• 작성시 반드시 super(props) 호출 (상속받고 있는 Component 클래스가 지닌 생성자 함수를 호출)
• this.state 값에 초깃값을 설정

 

render

• state 조회할 때 this.state를 조회
• 설정할 함수 넣어 줄때는 화살표 함수 문법 사용
• this.setState 함수로 state 값을 변경

 

state 초깃값 설정

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

 

객체 대신 함수 인자 전달

prevState 기존 상태, props 현재 지닌 props를 지칭
화살표 함수로 객체를 바로 반환
setState의 두번째 파라미터로 콜백함수를 등록하여 작업을 처리 가능

//인자가 존재한 경우
this.setState((prevState, props) => {
	return {
    	// 업데이트 내용
    }
})