5 React | State

State 정의

state 는 컴포넌트 내부에서 바꿀 수 있는 값을 의미한다.
props 는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하고 주는
읽기 전용 값이지만, state 는 컴포넌트 내부에서 설정되는 값이다.
우리는 state 의 변경되는 값을 관리하며 다양한 작업을 진행할 수 있다.

리액트는 클래스형 컴포넌트에서 state 를 직접 사용할 수 있다.
하지만 함수형 컴포넌트는 직접 사용이 불가능하고 useState 라는 hooks 를 제공한다.

• 전통적인 방식

<script type="text/babel">
    // 전통적인 방식 (생성자에서 this.state 설정)
    class Counter extends React.Component {
        constructor (){
            super(); // state를 사용하려면 부모의 생성자 super()를 꼭 명시해줘야함.

            this.state = {
            number : 3
            }
            // 생성자 안에서 state 를 사용하는 방법
            // 1. state는 this. 을 명시해야한다.
            // 2. 이름은 반드시 state 여야 한다.
            // 3. state 에 저장되는 값의 형태는 반드시 객체 리터럴 형태로 작성해야 한다..
        }

        render(){
            const number = this.state.number;
            console.log(number);

            /* 
                state 에 변화 주기
                state 에 객체 형태로 컴포넌트가 관리할 값들이 저장되어 있을 때
                state 에 변화를 주고 싶으면 state에 직접 접근하는 것이 아닌
                setter(setState) 메소드를 호출하고 관리할 값에 변화를 준 새로운 객체를
                인수로 전달해야한다..

                setState() 를 통해 변화를 주면 자동으로 render() 는 재 호출된다..
                그러면 render() 가 변화하는 새로운 엘리먼트를 가상 dom에 갈아 끼우게 되고
                실제 dom tree 와 차이나는 부분만 확인해서 다시 그려주게 된다..
            */

            return(
                <>
                    <h1>{this.state.number}</h1>
                    <button onClick={() => this.setState({number : number+1})}> +1 </button>
                </>
            )
        }
    }

    ReactDOM.createRoot(document.getElementById("root")).render(<Counter/>);

</script>

- After setState

setState 이후 특정 작업 실행하기
실행 이후 특정한 작업을 실행하고 싶을 때
두 번째 인자로 콜백함수를 전달하여 처리할 수 있다..

<script type="text/babel">
    // 클래스 필드 문법 (생성자 없이 state 정의) -> 최신 더많이 씀

    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}>1</div>

                    <button onClick={() => {
                        this.setState({isOn : !isOn}, 
                            () => console.log(isOn ? "불이 켜졌습니다" : "불이 꺼졌습니다.")
                        );
                    }}>{isOn ? "on" : "off"}</button>
                </>
            )
        }
    }


    function Light2(){
        const {useState} = React;
        const [isOn, setIsOn] = useState(false);

        const style = {
                width: 200,
                height: 200,
                backgroundColor : isOn ? "green" : "red",
                transition : "2s"
        };

        return (
            <>
                <div style={style}>2</div>

                <button onClick={()=>{
                    setIsOn(!isOn, console.log(isOn ? "불이 켜졌습니다.2" : "불이 꺼졌습니다.2"))
                }}>{isOn ? "on2" : "off2"}</button>
            </>
        )
    }


    ReactDOM.createRoot(document.getElementById("root")).render([<Light/>, <Light2/>]);

</script>

- useState

React 객체 내부에 존재하는 함수형 속성이다..
그래서 React.useState 로 호출해야 한다.

<script type="text/babel">

    const {useState} = React;

    function Say(){

        const [message, setMessage] = useState("기본상태"); // message 초기값 "기본상태" / setMessage로 변경해야한다.
        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>
                    <button onClick={()=>setColor("red")}>색변경</button>
                    <br/>
                    <button onClick={()=>{
                        return (
                            setBackGroundColor("black"),
                            setColor("white")
                        )
                    }}>다크모드</button>
                    <button onClick={()=>{
                        return (
                            setBackGroundColor("white"),
                            setColor("black")
                        )
                    }}>기본모드</button>
                </div>
            </>
        )
    }


    ReactDOM.createRoot(document.getElementById("root")).render(<Say/>);

</script>