state
01_state
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
state : 컴포넌트 내부에서 설정되는 값, 변경되는 값 관리
props : 부모 컴포넌트가 설정하는 값, 읽기 전용으로 사용
클래스형 컴포넌트에서는 state를 직접 사용할 수 있다.
함수형 컴포넌트에서는 useState라는 hooks로 별도로 기능을 제공하고있다.
state 사용법
- state를 초기화 한다.
- 생성자 안에서 초기화하는 경우 this. 를 붙인다.
- 이름은 state로 작성
- state에 저장되는 값의 형태는 반드시 Object 리터럴 형태로 작성
this.state = {
number : 0,
test : 'hello'
}state 값 변경하기
-
setState 함수를 이용
새로운 상태 값을 가지고 있는 Object를 동일한 키로 설정하여 인자를 전달하면 state객체를 덮어쓰게된다.
기존 state에 여러 값들이 있다고해도 동일한 키(number만)를 가진 값만 덮어쓰게된다. -
setState{ 키값 : 변경값 }
return (
<>
<h1 style={ number < 0 ? { color : 'red' } : { color : 'blue' } }>Conut : { number }</h1>
<button onClick={ () => this.setState({ number : number - 1 })}> -1</button>
<button onClick={ () => this.setState({ number : number + 1 })}> +1</button>
</>
);02_prev-state
prevState : 메모리에 임시로 변경 저장된 state 값을 가져온다.
prevState를 활용한 setState함수 사용
this.setState를 사용할 시 상태가 변경되고, 리랜더링이 되어야 최종적으로 state 값 변경이 적용된다.
(메모리만 임시로 변경된 상태를 가지고 있으며 해당 함수가 종료되면 변경 내역을 반영한다.)
state 객체 대신 함수를 인자로 전달하여
첫번째 인자 : prevState
두번째 인자 : props를 활용
(props가 필요하지 않은 상황이라면 생략 가능)
생성자 함수 없이 클래스의 속성으로 state를 추가하는 것도 가능하다.
- this. 는 사용이 불가능
- this. 은 인스턴스 생성 후 래퍼런스를 보관할 변수이기 때문에 생성자 혹은 함수 내에서만 사용 가능
state = {
number : 0
}return (
<>
<h1 style={ number < 0 ? { color : 'red' } : { color : 'blue' } }>Conut : { number }</h1>
<button onClick={ () => this.setState({ number : number - 1 })}> -1</button>
<button onClick={
() => {
/* setState로 상태를 변경하지만 반영이 되어있지는 않다.
메모리만 임시로 변경된 상태를 가지고 있으며
해당 함수가 종료되면 변경 내역을 반영한다. */
// console.log(`number : ${this.state.number}`);
// this.setState({ number : number + 1 })
// console.log(`number : ${this.state.number}`);
// this.setState({ number : number + 1 })
// console.log(`number : ${this.state.number}`);
/* 이러한 상황을 해결하기 위해서는 prevStete를 이용한다. */
this.setState((prevState, props) => {
return {
number : prevState.number + 1
};
});
this.setState(prevState => ({ number : prevState.number + 1 }));
}
}
> +1</button>
</>
);03_after-set-state
setState 이후 특정 작업 실행하는 방법
return(
<>
<div style={style}></div>
<button onClick={
() => this.setState(
{isOn : !isOn},
/* setState 동작 이후 실행할 콜백 함수를 두번째 인자로 전달할 수 있다.*/
() => console.log(isOn ? '불이 꺼졌습니다.' : '불이 켜졌습니다.')
)
}
>
{ isOn? 'OFF' : 'ON' }
</button>
</>
);콘솔창에서 출력되는 내용
04_useState
React 객체 내부에 존재하는 함수형 속성이다.(hooks의 한 종류)
먼저 배열 구조화 할당을 알아야한다. 배열 안에 있는 값을 firstName, lastName에 담아준다. 배열구조분해할당을 사용하면 단축해서 작성이 가능하고 값을 쉽게 추출할 수 있다.
/* 기존 방식 */
let firstName = nameArr[0];
let lastName = nameArr[1];
/* 배열구조분해할당*/
let [firstName, lastName] = nameArr;
작성법
React.useState() 형태로 호출해서 사용해야하지만 구조분해할당을 이용하여 useState()로 사용할 수 있다.
// useState구조분해할당
const { useState } = React;
/* message라는 상태와 setter 메소드를 배열 구조분해할당으로 할당한 뒤
message를 '기본상태'(초기값)으로 초기화 함 */
// [현재상태, setter함수] 변수명은 자유롭게 지어줄 수 있다.
const [message, setMessage] = useState('기본상태');여러개의 상태들은 한 컴포넌트 내에서 사용해도된다.
const [color, setColor] = useState('black');
const [backgroundColor, setBackgroundColor] = useState('white');