e:I[50313,["1345","static/chunks/1345-9cce9003361149c3.js","1252","static/chunks/1252-ebd18985bba615a5.js","6457","static/chunks/app/post/%5Bid%5D/page-f10e08b3d78367ee.js"],"default"] f:T780,$$config title: [ReactJS] useState - setState 데이터 전달 방식 keywords: - ReactJS - State Function - ... $$ # state Function (setState)에서 데이터값을 바꾸는 방식 : 2가지 - setState함수 안에서 직접 state(데이터값)를 전달하는 방식 : 안전하지 않음. (만약, 다른 함수에서 해당 set함수 안의 데이터값을 바꾼다면 set함수에서 전달하려는 값이 달라짐.) ```js const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter(counter+1); }; //만약 이후에 다른 곳에서 counter를 바꾼다면 버튼을 누를 때마다 counter 가 증가하는 함수가 아님. //전달하려는 값이 안전하지 않음. ``` - 함수를 통해서 전달하는 방식 : 안전한 방식 (현재 state를 바탕으로 이 state를 새로운 변수에 넣고 다음 state값만 계산. -> 다른 곳에서 변경되어도 여기서는 변경될 일이 없음.) ```js const [counter, setCounter] = React.useState(0); const onClick = () => { setCounter((current) => current +1); }; ``` => 함수를 통해서 전달하는 방식이 좀 더 안전하기 때문에 이를 활용하는 것을 권장함. # 안전한 방식을 이용한 예시 ```js

... 생략 ... const root = document.getElementById("root"); //useState를 이용한 counter 증가 function App(){ const [counter, setCounter] = React.useState(0); // 안전한 방식으로 교체 const onClick = () => { setCounter((current) => current + 1); }; return (

Total Clicks : {counter}

); }

게시글 상세