[React] useState, onClick 데이터 상태 변화

useState

어떠한 이벤트 발생시 변수의 값을 바꾸고 싶을때 useState를 사용한다. 

data라는 변수를 선언하고 바꾸고싶다고 하였을때 형태는 아래와 같다.

// useState에는 초기화할 값을 넣어주면 된다.
// setData외에 다른 변수명을 지어도 되지만, 관습적으로 변수명앞에 set을 붙인다.
let [data,setData] = useState('');

return(
    <>
        <div>{data}</div>
        <button onClick={()=>{setData("Hello")}}></button>
    </>
)

button을 클릭하게 되면 data의 값이 Hello바뀌는 로직을 작성해보았다. onClick={ 함수로직 } 사용 방법은 이러하다.

 

배열 형태로의 데이터들도 핸들링이 가능하다. 사용법은 다음과 같다.

let [data,setData] = useState([0,1,2]);

return(
    <>
        <div>{data}</div>
        <button onClick={()=>{
            let newArr = [...data];
            newArr.push(3);
            setData(newArr);
        )}}></button>
    </>
)

눈여겨 봐야할점은 let newArr = [...data] 이부분이다.

 

데이터를 수정할때 원본데이터를 직접 수정하는 행위는 지양해야한다. 단순한 데이터의 경우는 바로 접근해도 문제가 없겠지만

서버로부터 데이터를 받아와서 공용적으로 데이터를 사용한다면 데이터가 일관성이 있지 않을수 있다.

 

원본데이터를 다른곳에서도 사용하고있을수있기때문에 웬만해서는 원본데이터의 사본을 핸들링한다.

 

이때 스프레드 연산자로 원본배열을 깊은복사를하여 사본을 만들어 준 뒤 데이터를 변경한다.

let [data,setData] = useState([0,1,2]);

return(
    <>
        <div>{data}</div>
        <button onClick={()=>{
            setData([3,...data])
        )}}></button>
    </>
)

이런식으로도 원본데이터를 가져온뒤 새로운 데이터를 붙여서 저장하는 방식도 있다.

 

Angular와 비슷하면서도 Html에서 직접 함수를 사용해서 데이터를 핸들링 한다는 점에서 다른점이 있는것같다.