리액트 | state

책 103p 

State

1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다
2. state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다.
3. 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다.
4. 함수형 컴포넌트에서는 내장함수 훅 Hook개념을 이용해서 클래스형보다 더욱 쉽게 사용 가능 합니다.

함수형 컴포넌트에서는 useState()를 사용합니다.

 

함수형 컴포넌트 state 훅

나의 첫번째 훅

useState(초기값) 

useState() : 배열반환 

첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter함수) 를 반환합니다.

 

state는 어떤 타입이던 상관 없습니다. (str, number, object)

state는 여러개 일 수도 있습니다.

state는 직접 수정하면 안 됩니다. setter를 사용하세요!

 

 

예제 1 ) 

 

StateComponent.js 

import { useState } from "react";
import App from "../App"

const StateComponent = () => {

    /*
    state란 컴포넌트에서 변화하는 값을 의미합니다.
    state가 변경되면 컴포넌트 리렌더링 시킵니다.
    함수형컴포넌트에서는 useState()를 사용합니다.
    */

    
    //1st
    // let data = useState('초기값');
    // console.log(data);
    // let a = data[0];
    // let b = data[1];

    //2nd
    let [data, setData] = useState('초기값');
    //console.log(data); //state값
    // console.log(setData); //state setter함수
    let func = () => setData("변경");
    let enter = () => setData('입장');
    let exit = () => setData('퇴장');
    
    //state는 여러개일 수 있습니다.
    let [color,setColor] = useState('red');


    return (
        <>
            <h3 style={{color:color}}>state값 : {data}</h3>
            <button onClick={func}>값변경하기</button>
            <button onClick={enter}>입장</button>
            <button onClick={exit}>퇴장</button>

            <hr/>
            <button onClick={()=>setColor("red")}>붉은색</button>
            <button onClick={()=>setColor("blue")}>파랑색</button>
            <button onClick={()=>setColor("yellow")}>그 사이 3초  그 짧은색</button>

        </>
    )
}

export default StateComponent;

 

 

예제 2 )

 

StateComponentQ.js 

import { useState } from "react";

const StateComponentQ = () => {

    const [num,setNum] = useState(0);

    return (
        <>
            <h3>실습</h3>
            <h3>카운트 : {num}</h3>
            <button onClick = {() => setNum(num+1)}>증가</button>
            {/* num++, num--는 state값을 직접 변경해주는것이기 때문에 불가능하다. */}
            <button onClick = {() => setNum(num-1)}>감소</button>
            <button onClick = {() => setNum(0)}>초기화</button>
        </>
    )
}

export default StateComponentQ;

 

 

클래스형 컴포넌트 state

state는 생성자 안에서 초기화를 합니다.

클래스형에서 생성자를 작성할 때는 반드시 props를 받고, super을 통해서 부모컴포넌트에 연결해야합니다.

state의 접근은 this.state를 이용해서 접근합니다

state는 반드시 객체모형이어야 합니다.

MyComponent3.js 

import { Component } from "react";


class MyComponent3 extends Component {
   
   //state는 생성자 안에서 초기화를 합니다.
   //state의 접근은 this.state를 이용해서 접근합니다.
   //state는 반드시 객체모형이어야 합니다.


   //클래스형에서 생성자를 작성할 때는 반드시 props를 밥고, supter을 통해서 부모컴포넌트에 연결해야합니다.
    
   constructor(props){
        super(props);
        this.state = {
            a : 1,
            b : props.name //부모로부터 전달받은 name
        }
   }
   
    //클래스형 컴포넌트는 render함수안에서 return을 작성
    render() {

        let {name} = this.props;//props
        // console.log(name);

        return (
            <>
                <hr/>
                <div>나의 클래스형 컴포넌트</div>
                state값 {this.state.a} <br/>
                state값 {this.state.b} <br/>
            </>
            )
    }
}

export default MyComponent3;