6-1. Basic
- state는 컴포넌트 내부에서 바뀔 수 있는 값 의미
- props는 부모 컴포넌트가 설정하는 값이지만, state는 컴포넌트 내부에서 설정되는 값
- props는 읽기 전용으로 사용되지만, state는 변경되는 값을 관리
- 클래스형 컴포넌트에서는 state를 직접 사용할 수 없음
- 함수형 컴포넌트에서는 useState라는 hooks로 별도 기능 제공
class Counter extends React.Component{
/* 컴포넌트를 생성할 때 가장 먼저 호출 되는 생성자 함수이다. */
constructor(props){
/* 부모 컴포넌트로부터 전달 받은 props를 부모 클래스의 생성자에 전달하면서 컴포넌트를 생성. */
super(props);
/* state를 초기화 한다. state는 생성자 안에서 초기화 하는 경우 this.을 붙여야 한다.
또한 이름을 state로 작성해야 하며, state에 저장 되는 값의 형태는 반드시 Object 리터럴 형태로 작성. */
this.state = {
number : 0
};
}
render(){
/* state에 저장 된 number 상태 값을 구조분해할당을 이용해서 저장 */
const { number } = this.state;
/* state의 값을 변경하기 위해서는 setState 함수를 이용해야 한다.
새로운 상태 값을 가지고 있는 Object를 동일한 키로 설정하여 인자를 전달하면 state 객체를 덮어쓰게 된다.
기존 state에 여러 값들이 있다고 해도 동일한 키를 가진 값만 덮어 쓰게 된다. */
return(
<>
<h1 style={ number < 0 ? {color : 'tomato'} : {color : 'orange'} }>Count : {number} </h1>
<button onClick={ () => this.setState({ number : number - 1 })}>-1</button>
<button onClick={ () => this.setState({ number : number + 1 })}>+1</button>
</>
);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter/>);6-2. PrevState
- this.state를 사용할 시 상태가 변경 되고 리렌더링이 되어야 state 값 변경 적용
- 하나의 이벤트 핸들러에서 여러번 setstate를 호출한다고 누적 갱신 되지 않음
- 이 때, state 객체 대신 함수를 인자로 전달하여 첫번째 인자 prevState, 두 번째 인자 props를 활용 가능
- 만약 props가 필요하지 않은 상황이면 생략 가능
class Counter extends React.Component{
/* 생성자 함수 없이 클래스의 속성으로 state를 추가하는 것도 가능하다.
이 때 this. 는 사용이 불가능하다. this. 은 인스턴스 생성 후 레퍼런스를 보관할 변수이기 때문에 생서자 혹은 함수 내에서만 사용이 가능하다.
*/
state = {
number : 0
};
render(){
const { number } = this.state;
return(
<>
<h1 style={ number < 0 ? {color : 'tomato'} : {color : 'orange'} }>Count : {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}`);
/* 이러한 상황을 해결하기 위해서는 prevState를 이용한다. */
this.setState((prevState, props) => {
return {
number : prevState.number + 1
};
});
this.setState(prevState => ({ number : prevState.number + 1 }));
}}>+1</button>
</>
);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter/>);6-3. After set State
/* setState 이후 특정 작업 실행하기 */
class Light extends React.Component {
state = {
isOn : false
};
render() {
const { isOn } = this.state;
const style = {
width : 200,
height : 200,
backgroundColor : isOn ? 'green' : 'red',
transition : '2s'
};
return (
<>
<div style={style}></div>
<button onClick={
() => this.setState(
{ isOn : !isOn },
/* setState 동작 이후 실행할 콜백 함수를 두번째 인자로 전달할 수 있다. */
() => console.log(isOn ? '불이 켜졌습니다' : '불이 꺼졌습니다')
)
}
>
{ isOn? 'OFF' : 'ON' }
</button>
</>
);
}
}
ReactDOM.createRoot(document.getElementById('root')).render(<Light/>);6-4. Use State
- 함수형 컴포넌트에는 기본적으로 state를 사용할 수 없었지만, 리액트 16.8 버전 이후로는 useState 함수를 이용하여 함수 컴포넌트에서도 state 사용 가능
- useState는 React 객체 내부에 존재하는 함수형 속성
- React.useState() 형태로 호출해서 사용해야 하지만 구조분해 할당을 이용하여 미리 전역변수로 선언해두고 나면 React.를 생략하고 useState()로 사용 가능
const { useState } = React;
function Say(){
/* message 라는 상태와 setter 메소드를 배열 구조분해할당으로 할당한 뒤 message를 '기본상태(초기값)' 으로 초기화 함 */
const [message, setMessage] = useState('기본 상태');
/* 여러 개의 상태들을 한 컴포넌트 내에서 사용해도 된다. */
const [color, setColor ] = useState('black');
const [backgroundColor, setbackgroundColor] = useState('white');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요.');
return (
<>
<h1 style={ { color, backgroundColor} }>{ message }</h1>
<div>
<button onClick = { onClickEnter }>입장</button>
<button onClick = { onClickLeave }>퇴장</button>
</div>
<div>
<button onClick = { () => setColor('tomato')}>토마토색</button>
<button onClick = { () => setColor('orange')}>오렌지색</button>
<button onClick = { () => setColor('purple')}>보라색</button>
</div>
<div>
<button onClick = { () => setbackgroundColor('white')}> 기본 배경 </button>
<button onClick = { () => setbackgroundColor('black')}> 반전 배경 </button>
</div>
</>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Say/>); 
DREAM STARTER