[React]state

state란?

- 컴포넌트 내부에서 바뀔 수 있는 값.

- 부모 컴포넌트에서 state를 props로 넘겨줄 경우 하위 컴포넌트는 state를 읽는 용도로만 사용할 수 있음.

- 부모 컴포넌트로부터 넘겨받은 state값을 수정해야하는 경우 부모 컴포넌트에서 직접 state를 수정해야 함.

- 컴포넌트 타입에 따라 state 사용 방법이 다름.

 

---

1. 클래스형 컴포넌트 (state)

- this.state에서 state값을 초기화 하고, 값을 변경할 때에는 this.setState를 사용. 

import React, { Component } from 'react';
 
class ReactState extends Component {
  constructor (props) {
    super(props);
    //생성자 안에서 state 초기값 정의
    this.state = {
        StateString: this.props.reactString,    //props.reactString = 'react'
        StateNumber: 200,  
    }
  }
 
  StateChange = (flag) => {
      if(flag == 'direct'){
        //StateString값은 바뀌지만 reder()함수가 호출되지 않음. 'react'로 출력됨  
        this.state.StateString = '리액트';
      } 
      
      if(flag == 'setState'){
        //StateString이 '리액트'로 바뀌고 reder()함수를 재호출함. '리액트'로 출력
        this.setState({StateString : '리액트'});
      } 
 
      if(flag == 'forceUpdate'){
          //StateString값은 바뀌지만 reder()함수가 호출되지 않음.
          this.state.StateString = '리액트';
          //화면을 강제로 새로고침하는 함수
          this.forceUpdate();   
          // '리액트'로 출력
      }
  }
 
  render() {
    return (
    <div style={{padding: "0px"}}>
      stateString : {this.state.StateString}
      <br/>
      stateNumber : {this.state.StateNumber}
 
      <button onClick={(e) => this.StateChange('direct', e)}>state직접변경</button> 
      <button onClick={(e) => this.StateChange('setState', e)}>setState로 변경</button>
      <button onClick={(e) => this.StateChange('forceUpdate', e)}>state직접변경 - forceUpdate</button> 
    </div>
    )
  }
}
 
export default ReactState;

 

 

 

2. 함수형 컴포넌트 (useState())

- useState('초기값')을 통해서 state를 선언하고, 선언한 두번째 원소(setMessage())를 통해 값을 변경

import React, {useState} from 'react';
 
const Say = (props) => {
 
    const [message, setMessage] = useState(''); 
    //state변수 message의 초기값 설정 
    // 첫번째 원소 : 현재상태, 두번째 원소 : 상태를 바꾸어주는 함수. == 세터(Setter)함수
 
    const onClickEnter = () => setMessage("hi");
    const onClickLeave = () => setMessage("bye");
 
    const [color, setColor] = useState('black');
 
    return(
        <div>
            <button onClick={onClickEnter}>hi</button>
            <button onClick={onClickLeave}>bye</button>
            <p style={{color}}>{message}</p>
 
            <button onClick={() => setColor('red')}>
                빨간색
            </button>
            <button onClick={() => setColor('green')}>
                초록색
            </button>
            <button onClick={() => setColor('blue')}>
                파란색
            </button>
        </div>
)};
 
export default Say;

 

 

 

---

state사용 시 주의사항.

* state값을 변경할 때에는 state변수에 직접 접근하지 않고 셰터 함수를 사용한다. 

* 배열이나 객체를 업데이트하는 경우 객체의 사본을 만들고, 사본을 업데이트 한다.

 

클래스형

//선언
this.state = {
	number:1,
	obj : {a:1, b:2, c:3}
    };

//수정
this.setState({number:2});
var tmp = {...this.state.obj, b:1}
this.setState({obj:tmp})

 

함수형

//선언
const [number, setNumber] = useState(1);
const [obj, setObj] = useState({a:1, b:1, c:1});

//수정
setNumber(2);
var tmp = {...obj, b:2};
setObj(tmp);

 

사본만들기

//객체
const object = {a:1, b:2, c:3}
const nextObject = {...object, b:2);
//사본을 만들어서 b값만 덮어쓰기



//배열
const array = [
  {id:1, value:true},
  {id:2, value:true},
  {id:3, value:false}
]

let NextArray = array.concat({id:4}) //새 항목 추가
nextArray.filter(item => item.id !== 2); //id가 2인 항목을 제거
nextArray.map(item => item.id === 1 ?{...item, value:false}:item)); //id가 1인 항목의 value를 false로

 

 

 

---

참조 : 리액트를 다루는 기술(김민준 / 길벗)