[useState] Nomad Coders 영화 웹 서비스 만들기 #2
📑 Nomad Coders ‘ReactJS로 영화 웹 서비스 만들기’ 강의를 듣고 정리한 내용입니다.
re-rendering
지난시간에 이어 버튼을 누르면 count가 증가하고 화면에 렌더링 되는 코드를 만들었다.
<!DOCTYPE html>
<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");
let counter = 0;
function countUp() {
counter = counter + 1;
render();
}
function render() {
ReactDOM.render(<Container />, root);
}
const Container = () => (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
// ReactDOM.render(<Container />, root);
render();
</script>
</html>
vanilla js 에서는 Total Clicks : 0 부분을 innerText로 바꿔줬었는데 그럴 필요 없이 중괄호 안에 변수명을 넣으면(Total Clicks : {counter}) 화면에 렌더링된다.
그리고 버튼에는 eventListener대신 onClick으로 함수를 넣어주면 된다.
맨 아래에서 화면에 렌더링 시켜주는 부분(ReactDOM.render(
실제로 count가 증가하고 있지만 화면에 나타나고 있지 않다.
UI를 새로고침해주는 re-rendering 코드가 필요하다.
화면을 렌더링해주는 코드를 함수에 넣고 카운트가 업데이트 될 때 해당 함수를 사용해서 리렌더 되게 만들었다.
하지만 이것보다 더 좋은 방법이 있다.
useState()
바로 React.useState()를 사용하는 것이다.
직접 리렌더 코드를 작성해 줄 필요 없이 컴포넌트 전체를 자동으로 리렌더 해준다.
<!DOCTYPE html>
<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 [counter, setCounter] = React.useState(0);
const onClick = () => {
// setCounter(counter + 1);
setCounter((current) => current + 1);
};
return (
<div>
<h3>Total Clicks : {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
💫 const [state, setState] = React.useState(초기값);
state = 현재 값
setState = 업데이트 값(보통 현재 값의 변수명 앞에 set을 붙여서 변수명을만든다.)
맨 뒤 소괄호에는 초기값을 입력해준다.
state를 바꿔주는 두 가지 방법
- setState에 새 값으로 지정해주는 방법
- setState(1); - 현재 값을 바탕으로 설정
- setState(state + 1)
- setState((current) => current + 1)
Leave a comment