[React] - state 변경

const Test = () => {

    let [val, setVal] = useState(0);

    return (
        <div>
            <span onClick={() => {setVal(val+1) }} >    
                <p>
                    {val}
                </p>
            </span> 
        </div>
    );
}

get(val) : 값만 가져오는 곳

set(setVal) : 설정, 값변경

 

결국에는, SET, GET 메소드를 사용하는 이유는 외부로부터 변수값에 직접적으로 접근하는것을 막기 위해서다. 직접 접근하개 되면 값이 변하게 되고 그러면 데이터 무결성이 깨질 수 있기 때문이다.

 

* state 의 값을 변경하기 위해선 setVal 값으로 바꾼다!

 

array, object state 변경 하려면

 

[...val]

{...val}

이런식으로 카피본을 만든다.

... - spread operator 라고하는 문법인데 array나 object 자료형 왼쪽에 붙일 수 있으며 뜻은 별거없고 괄호를 벗겨주세요~ 라는 뜻이라한다.

 

const Test = () => {

    let [title, setTitle] = useState(['바나나', '딸기', '사과'])

    return (
        <div>
            <h1>{title}</h1>
            <button onClick={() => {
                let copy = [...title];
                copy.sort();
                setTitle(copy)
            }}>정렬버튼</button>
        </div>
    );
}

array,object 는 ...[val],{val} 로 원천데이터 복사해서 사용하도록한다!