$$config title: [ReactJS] useState 활용 (배열) ? keywords: - ReactJS - useState - ... $$ # useState에서 제공하는 배열에서 꺼내쓰기 > 예시 ```js const food = ["tomato", "potato"] const [myFavFood, mySecondFavFood] = food; myFavFood //출력 : 'tomato' ``` `const [myFavFood, mySecondFavFood] = food;` 을 활용하기 !! useState에서 제공하는 배열은 [ 데이터의 초기값, 데이터를 바꾸는 함수 ]이고 새로운 배열을 만들고 이를 꺼내쓰면 됨. useState에서 새로운 배열을 만드는 형식은 const [데이터값, set데이터명]임. > useState 형식 ??? ```js const [데이터값, set데이터명] = React.useState(데이터 초기값) //const [ 데이터값, set데이터명 ] = [ 데이터의 초기값, 데이터를 바꾸는 함수 ] 와 같은 형식 ``` 예를 들어, const [counter, modifier] = React.useState() 를 이용해서 [ undefined, function ] 를 받아왔을 때 counter에 값을 넣고 이를 변경시키고 리렌더링을 일으키는 것을 modifier에서 처리하는 것임. # useState의 동작방식 : 해당 데이터 값을 바꾸는 set함수가 실행 -> 해당 set함수를 가진 컴포넌트가 재생성 (여기서 return에서 해당 데이터값을 새로운 값으로 바꾼 채로 재생성) # useState 예시 : 버튼을 클릭했을 때 counter가 1씩 증가 ```js

... 생략 ... const root = document.getElementById("root"); //useState를 이용한 counter 증가 function App(){ const [counter, setCounter] = React.useState(0); //핵심!! const onClick = () => { setCounter(counter+1); }; return (

Total Clicks : {counter}

); } ReactDOM.render(, "root"); ``` onClick을 이용해서 버튼을 눌렀을 때 setCount에서 counter를 +1 씩 조정함.