[React] state

 

---

알고있으면 좋은 React Tip✨

---

state란?

• 리엑트에서 이벤트에 의해 변경되는 동적인 값이다.
• state는 props와는 달리 하위 컴포넌트도 데이터를 변경할 수 있다.
• 버튼을 클릭하는 onClick 이벤트에 의해 값이 변경된 경우 사용된다.
• 함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있다.

 

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

• state 값을 변경할 때는 반드시 setState를 사용하여 변경해야한다.
• setState를 사용한 경우, state값이 변경되면 useState가 변경을 감지하고, 자식 컴포넌트들까지 리렌더링이 발생한다.

import React, {useState} from 'react';

function StateFunction(){
    // msg : 초기값  setMsg : msg를 변경하기 위해 사용하는 함수
    const [msg, setMsg] = useState('');

    function changeMsg(){
         // setState({msg : 메세지})와 같다.
         setMsg('메세지');
    }

    return(
       <div>
              <div>
                  StateFunction
                  <p>{msg}</p>
              </div>

              <button onClick={changeMsg}>클릭</button>
       </div>
    );
}

export default StateFunction;

 

(2)클래스형 컴포넌트에서 state 사용하기

import React, {Component} from 'react';

class StateClass extends Component{
   state = {
       name : 'SeSAC',
       cnt : 0,
       list : ['s', 'e', 's', 'a', 'c']
   }
   
    render(){
       return(
          <div>
                 <div>{this.state.name}StateClass{this.state.cnt}</div>

                 <button onClick={() => {
                     // setState : state의 값을 바꾸는 함수
                     // prevState : 기존 상태
                     this.setState(prevState => {
                        return {cnt : prevState.cnt + 1}
                     });

                     this.setState(prevState => {
                        return {cnt : prevState.cnt + 1}
                     });
                 }}>클릭</button>

              
                 <button onClick={() => {
                     this.setState({list : ['c', 'l', 'i', 'c', 'k']})
                 }}>클릭2</button>

                 <ul>
                    {this.state.list.map((txt) => {
                        return <li>{txt}</li>
                    })} 
                 </ul>
        </div>
      );
    }
}