https://nomadcoders.co/react-for-beginners
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React for Beginners
nomadcoders.co
<!DOCTYPE html>
<html>
<body id="root"></body>
<!--React import-->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!--React-dom import-->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--Babel standalone-->
<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>
<state를 셋팅해주는 2가지 방법>
1. 직접 값을 설정 -> setCounter(counter + 1)
2. 함수를 전달 -> setCounter((current) => current + 1)
만약 현재 값을 가지고 계산을 해야 한다면,
setCounter((current) => current + 1); 로 작성
setCounter 함수의 첫번째 argument는 현재 값(current)이고, 이 함수의 return값이 새로운 state(current + 1)가 됨
따라서 이 함수가 무엇을 return하던지 그것이 새로운 state가 됨
※ current라고 넣어도 작동하는 이유는, 함수일 경우에 저장되어 있는 값을 인자로하여 리턴한 값을 최종적으로 업데이트
이 코드가 더 안전한 이유는
리액트가 이 current가 확실히 현재 값이라는 것을 보장 하고 있음(우리가 정확히 원하는 값으로 계산할 수 있도록)
!현재 state를 기반으로 계산을 하고 싶다면 함수를 이용!
'Study > React' 카테고리의 다른 글
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - prop types (0) | 2023.01.17 |
|---|---|
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - Props (0) | 2023.01.17 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - setState (0) | 2023.01.10 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - State (0) | 2023.01.05 |
| [노마드코더] ReactJS로 영화 웹 서비스 만들기 - react vs vanila js (0) | 2023.01.03 |
