망할고양이의 도피처

state에 문자열이나 숫자값이 아닌 Object 형태의 값을 넣어서 컨트롤 해보겠습니다. 

StatePrc.js 파일을 component 폴더 하위에 생성합니다. 

import { useState } from "react";

export default function StatePrc(){

    

    const [msg, setMsg] = useState({"message" : "", "user" : ""});

    return (

        <>
            <div>
                <h1>Event Test</h1>
                <div>message : {msg.message}</div>
                <div>user : {msg.user}</div>
                <input type="text"
                    name="msg"
                    placeholder="입력칸"
                    value={msg.message}
                    onChange={(ev)=>{
                        setMsg({...msg, "message" : ev.target.value});
                    }}
                ></input>
                <input type="text"
                    name="user"
                    placeholder="입력칸"
                    value={msg.user}
                    onChange={(ev)=>{
                        setMsg({...msg, "user" : ev.target.value});
                    }}
                ></input>
                <button onClick={()=>{
                    alert(msg.message + "메세지를 초기화 합니다.");
                    setMsg({"message" : "", "user" : ""});
                }}>초기화</button>
            </div>
        </>
    );
}

App.js에  방금 작성한 StatePrc 컴포넌트가 출력되도록 추가합니다. 

왼쪽 input은 msg.message를 값을 참조하고 

오른쪽 input은 msg.user의 값을 참조하도록 코드를 작성하였습니다.

state의 값중 object의 값을 변경할 때에는 기존값을 spread 연산자라고 하는 ... 연산자를 이용하여 값을 변경합니다.

지금까지 공부한 기능을 이용하여 복습의 시간을 위해 간단한 코드를 작성해 보겠습니다. 

onChange 이벤트를 이용하여 State에 값을 전달 한뒤 그 값이 화면에 잘 변경되어 출력되도록 하겠습니다. 

component 폴더 하위에 EventAndState.js 파일을 생성하고 아래와 같이 작성합니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
        </div>
    );
}

1. useState를 이용하여 name과 setName이 담겨진 배열을 생성하였습니다.

2. input 에 onChange 이벤트를 작성하였습니다. 

3. State에 값이 잘 전달되었는지 확인을 위해 name값을 화면에 출력하였습니다. 

(ev.target.value는 ev라는 이벤트가 발생한 target의 value값을 가리킵니다.)

동일한 기능을 하지만 여러 형태로 작성하는 방법이 있습니다. 

import { useState } from "react";

export default function EventAndState(){

    const [name, setName] = useState("");

    function onChangeTest(ev){
        setName(ev.target.value)
    }
    const onChangeTest2 = ev => setName(ev.target.value);

    return(
        <div>
            <h1>event와 state의 연습</h1>
            <input type="text" 
                name="msg" 
                onChange={function(ev){
                    setName(ev.target.value);
                }}
            />
            <div> State에 전달된 값 : {name}</div>
            <h1>다른 형태의 코드 # 1</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest}
            />
            <h1>다른 형태의 코드 # 2</h1>
            <input type="text" 
                name="msg" 
                onChange={onChangeTest2}
            />
        </div>
    );
}

useState

useState는 가장 기본적인 Hook 이며 함수 컴포.넌트에서도 가변적인 상태를 가질 수 있도록 합니다. 

함수 컴포넌트에서 상태관리를 해야하는 경우 사용하게 됩니다. 

단순히 말씀드리자면 state는 컴포넌트가 가지고 있는 속성값입니다. (그래서 뭐? 라고 할 수 있지만)
이 속성값이 변하면 리엑트는 자동으로 UI를 다시 출력합니다.

즉, 이 state만 잘 다룬다면 화면을 다시 그려주는 작업은 react가 다 알아서 해준다는 거죠

일단, 버튼을 클릭하면 화면의 Text가 변경되는 기능을 만들어 보도록 하겠습니다. 

component 폴더 하위에 State.js파일을 생성합니다. 

State.js

export default function State(){

    let textValue = "AAAA";

    function ChangeTextValue(){
        if(textValue === "AAAA"){
            textValue = "BBBB";
        }else{
            textValue = "AAAA";
        }
        document.getElementById("text_str").innerHTML = textValue;
        console.log(textValue);
        
    }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{textValue}</h2>
            <button onClick={ChangeTextValue}>Text Change</button>
        </div>
    );
}

생성된 component를 App.js에 추가합니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';  //추가된 항목
import Welcome from './component/Welcome';  //추가된 항목
import Event from './component/Event';  //추가된 항목
import State from './component/State';
function App() {
  return (
    <div className="App">
      {/* <div className='test'>App component</div> */}
      {/* <Greeting />    */}
      {/* <Welcome /> */}
      {/* <Event/> */}
      <State />
    </div>
  );
}

export default App;

이렇게 작성된 State.js의 코드는 state를 사용한 코드가 아닌 변수의 값을 dom 객체에 직접 넣은 코드입니다. 

이 코드를 동일하게 state를 이용하여 구현해보도록 하겠습니다. 

State.js를 수정합니다.

import { useState } from "react";

export default function State(){

    let textValue = "AAAA";

    
    const [name, setName] = useState("AAAA"); 

    // function ChangeTextValue(){
    //     if(textValue === "AAAA"){
    //         textValue = "BBBB";
    //     }else{
    //         textValue = "AAAA";
    //     }
    //     document.getElementById("text_str").innerHTML = textValue;
    //     console.log(textValue);
        
    // }
    return(
        <div>
            <h1>State</h1>
            <h2 id="text_str">{name}</h2>
            {/* <button onClick={ChangeTextValue}>Text Change</button> */}
            <button onClick={function(){   
                setName(name === "AAAA" ? "BBBB" : "AAAA");

            }}> changeText </button>
        </div>
    );
}

state를 사용하기 위해서는 반드시 지켜야할 것 이 있습니다.

1. state사용시 import 해야한다. 

      const [name, setName] = useState("AAAA");

      useState 함수의 파라메터는 상태의 기본값을 넣어줍니다.  이 함수를 호출하게되면 return되는 값은 배열이며

      0번째 값은 상태 값, 1번째 값은 setter 함수가 담겨 있습니다. 

      즉, name에 "AAAA"를 넣었으며 name값을 수정하는 함수의 이름은 setName이라는 의미입니다. 

3. 상태값의 변경은 setter 함수를 이용하여 수행한다.