개발일지 #18 - 리액트06

저번 일지에 이어서 오늘도 리액트의 또 다른 데이터 사용 방법인 'useState'에 대해서 기록하려고 한다.

useState에 여러 데이터를 저장해서 사용하는 방법에 대한 것이다. 우선 useState에 여러 데이터를 저장하는 방법은 배열을 이용하는 것이다. 아래의 코드를 참고 해보자.

function App() {
	let [data, setData] = useState(['데이터', '자료','배열','어레이']);
    return (
    	<div className="App">
        	<div className="data-group">{data}</div>
        </div>
        )
  }

하지만 위의 코드처럼 작성하면 배열 속에 있는 자료가 다 나오고 만다.

원하는 자료만 뽑아내려면 배열에서 자료를 선택해서 사용하듯이 하면 된다.

function App() {
	let [data, setData] = useState(['데이터', '자료','배열','어레이']);
    return (
    	<div className="App">
        	<div className="data-group">{data[0]}</div>
            <div className="data-group">{data[1]}</div>
            <div className="data-group">{data[2]}</div>
        </div>
        )
  }

 

이번엔 useState에 담긴 데이터를 수정하는 방법이다. 일반적인 변수의 경우에는 'const'를 제외한, var, let은 새롭게 변수를 저장해주면 데이터가 변경이 되었다. 하지만 useState의 경우 조금 다르다.

처음 useState를 이용해 데이터를 저장할 때 다음과 같이 저장했다.

 

let [data, setData] = useState('데이터')

destructuring 문법을 이용해서 선언한 이유가 있다. 기존에 담겨져 있던 데이터를 사용하려면 'data'만 사용하면 된다.

 

let [data, setData] = useState('데이터');
setData('자료');

 

이렇게 'setData'를 이용하면 기존에 저장된 데이터를 변경할 수 있다.