[React] useState() 함수
useState() 란?
컴포넌트(component)에서 바뀌는 변수의 값을 관리하는 함수입니다.
useState()를 사용할 때는 아래와 같은 형태로 사용합니다.
const [data, modifier] = React.useState(initial_value);
예제를 살펴보겠습니다.
const data = React.useState();
console.log(data);data를 React.useState()의 변수로 만들어준 후 콘솔(console)에 출력해보면
이렇게 콘솔(console)에 출력됩니다.
[undefined, f]
undefined는 초기 값(initial value)이고, f는 값을 수정하기 위한 함수입니다.
React.useState() 함수에 초기값을 넣어주면
넣어준 초기값이 출력됩니다.
보이는 것과 같이 React.useState() 함수는 배열(array)를 return 합니다.
그러면 값을 어떻게 받아올까요?
const value = data[0];
const func = data[1];이런 식으로 받아올 수도 있지만 다른 방식도 있습니다.
아래 방식이 React에서 자주 쓰이는 방식입니다.
const [data, modifier] = React.useState(0);
data를 어떻게 받아오는지 알았으니 이제는 data를 수정하는 방법에 대해서도 살펴봅시다.
앞에서도 언급했듯이, React.useState()의 두 번째가 데이터를 수정할 수 있는 함수입니다.
그렇기에 함수를 정의해서 사용해주면 됩니다.
const onClick = () => {
// modifier(data+1);
modifier((current) => current+1);
}onClick 함수는 modifier의 function을 정의해주고 있습니다.
onClick 함수가 불릴 때마다 modifier는 data의 값을 하나씩 증가시켜 줍니다.
자세한 설명은 아래 코드를 참고해주세요!
전체 코드를 살펴봅시다.
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
const [data, modifier] = React.useState(0);
const onClick = () => {
// modifier(data+1);
modifier((current) => current+1);
}
return (
<div>
<h3>Total clicks: {data}</h3>
<button onClick={onClick}> Click me! </button>
</div>
);
}
ReactDOM.render(<App/>, root);
</script>
</html>마지막 <script> 부분을 살펴보겠습니다.
const root = document.getElementById("root")
<body> tag에서 id="root"인 tag를 가르킵니다.
function App() {
App이라는 함수를 정의합니다.
const [data, modifier] = React.useState(0);
React.useState() 함수에서 반환하는 값을 data, modifier가 받습니다.
const onClick = () => { // modifier(data+1) modifier((current) => current+1)};
onClick이라는 함수가 불릴 때마다 modifider는 data의 값을 하나씩 증가시킵니다.
modifier(data+1)과 modifier((current) => current+1)는 같은 코드입니다.
다른점은 무엇일까요 ?
첫 번째 코드는 다른 코드에서 예상치 못한 data의 업데이트가 일어났을 때 혼동이 일어날 수도 있습니다.
두 번째 코드는 현재 state의 데이터를 가지고 업데이트를 시키기 때문에 예상치 못한 data의 업데이트가 일어나더라도 혼동을 방지해 줄 수 있기 때문에 더 안전한 코드라고 할 수 있습니다.
return (<div><h3>Total clicks: {data}</h3> <button onClick={onClick}> Click me! </button></div>);
버튼이 눌릴 때마다 {data}의 값이 하나씩 증가됩니다.
여기서 react를 사용하는 이유가 나옵니다.
우리는 웹 페이지가 켜졌을 때 render을 한 번만 해줍니다.
그런데 클릭이 될 때마다 data의 값이 어떻게 바뀌는 걸까요?
React.js가 자동으로 잘 처리해주고 있습니다.
바뀌는 부분만 업데이트해서 웹 브라우저의 UI를 변형시켜주게 되는거죠.
(바뀐 부분을 파악해서 HTML의 코드를 변형시켜 줌)
ReactDOM.render(<App/>, root);
render는 웹 브라우저가 켜진 처음에만 작동하는 코드입니다.
◡̈