state
state는 기본적으로 데이터가 저장되는 곳이다.
우리가 지금 바닐라JS로 진행중인 예제를 완성하려면
우리는 지금 counter를 증가시키고, 그걸 UI에 디스플레이 하고 있는데,
그걸 state로 만들 수 있다. (counter를..!)
state에 대한 예제로 버튼을 클릭할때마다 클릭한 횟수만큼 숫자가 올라가는 코드를 작성해보자.
우선, 이렇게 작성할 수 있다. (하지만, 별로 좋은 방법이 아니므로 추천하지 않는다.)
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.7.0/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");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container/>, root);
}
//Container 함수 = React Component
//rendering 을 하지 않으면 counter가 업데이트 되지 않는다.
//하단의 function Container()와 동일한 코드이다.
// const Container = () => (
// <div>
// <h3>Total clicks: {counter}</h3>
// <button onClick={countUp}>Click me</button>
// </div>
// );
function Container() {
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
}
render();
</script>
</html>위의 코드에서 render를 2번 작성해준 이유는,
실제로 버튼의 onClick을 통해서 countUp() 함수가 실행이 되면 counter 숫자가 올라가지만,
올라간 만큼 화면에서 표시가 되진 않는다.
그래서 countUp() 함수 내에서 rendering을 시켜줘야 하고,
코드가 끝날때 다시한번 더 rendering을 시켜줘야 한다.
하지만 이렇게 코드를 작성하면 매우 번거로워진다.
그럼에도 불구하고 VanillaJS 대신 ReactJS가 더 많이 사용되는 이유는,
Rendering이 될때마다 전체 UI가 업데이트되는 VanillaJS 와는 다르게
ReactJS는 변경되는 UI 부분만 업데이트가 되기 때문이다.
react에서는 위의 코드와 다르게 코드를 작성하는 방법이 있다.
그것은 바로 useState를 사용하는 것이다.
그 전에, 어떻게 useState를 사용할 것인지를 배워야 한다.
useState는 React.useState();를 통해서 React 컴포넌트인 useState를 불러올 수 있으며,
이것을 크롬을 통해서 검사하면 console 탭에서 다음과 같은 내용을 볼 수 있다.
위의 배열의 첫번째 값은 초기값을 의미하고, 두번째 값은 data의 값을 바꾼 후 렌더링을 해주는 함수를 의미한다.
위의 코드에서는 초기값은 counter가 그 역할을 했었고, data의 값을 바꾼 후 렌더링을 해주는 함수는 countUp 함수가 그 역할을 했었다.
우리는 useState 컴포넌트를 이용해서 이 배열값을 가져와서 함수로 사용할 수 있는 것이다.
그 전에, 이 배열값을 어떻게 들고오는지가 중요하다.
let state = React.useState(0); //초기값을 0으로 설정한다.
let counter = state[0];
let modifier = state[1];이런식으로 들고 올 수 있겠지만, 이 방식을 1줄로 줄일 수 있는 방법이 있다.
let [counter, modifier] = React.useState(0);이렇게 하면 1줄로 줄여서 값을 들고와서 각각 counter와 modifier를 상수값으로 사용할 수 있다.
React에서 useState 컴포넌트를 사용할때, 개발자들 사이에서 상수명을 만드는 것에 대한 약속이 있다.
우선, useState 컴포넌트를 들고 올때, 초기값 뿐만 아니라 함수 자체까지 들고오는 것이므로,
let이 아니라 const로 상수로 들고와야 하며,
함수의 변수명 앞에는 반드시 'set'을 붙여줘야 한다.
이를테면 다음과 같이 들고와야 한다.
const [state, setState] = React.useState(0);
자, 그럼 버튼을 클릭했을 때, 클릭한 횟수만큼 값이 증가하는 코드를 react 방식으로 코딩을 해보자.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://www.unpkg.com/react@16.8.4/umd/react.production.min.js"></script>
<script src="https://www.unpkg.com/react-dom@16.8.4/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 [counter, setCounter] = React.useState(0);
const onClick = () => {
setCounter( counter + 1 );
}
return (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
이런식으로 하면 훨씬 코드가 간결하고 보기 좋아진것을 알 수 있을 것이다.
오늘의 정리는 여기서 끝!!!
'개발 > React' 카테고리의 다른 글
| 3.7 State Practice (0) | 2023.06.11 |
|---|---|
| 3.4 State Functions (0) | 2023.06.10 |
| [복습] 2.5 JSX (0) | 2023.06.04 |
| [복습] 2.0 Introduction (0) | 2023.06.04 |
| 21.08.24 개발일지 (0) | 2023.05.24 |
