오늘은 노마드코더 스터디 세 번째 시간입니다. 오늘도 화이탱!
#3.0 (Understanding State)
• data that changes is the state (e.g., increasing the counter)
• reactJS only changes the only component that needs to be changed and changes only the thing that is updated (e.g., only the number of clicks changes not the whole button - vanilla js changes the whole span of button with click numbers)
• The following way is having the initial value and rerendering everytime we click the button --> not a good way
<!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>
);
//rendering the container only once so we need to recall again to update the number
render();
</script>
</html>#3.1~3.2 (setState)
ways to match each elements with the corresponding item
const food=["tomato","potato"]
const [myFavFood, mySecondFavFood]=food;
//console에 myFavFood를 치면 tomato가 나옴
const x = [1,2,3]
const [a,b,c]=x;
/console에 a를 치면 1이 나옴code before making a modifier function
<!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, modifier] =React.useState(0);
return(
<div>
<h3>Total Clicks: {counter}</h3>
<button>Click me</button>
</div>
);
};
ReactDOM.render(<App/>, root);
</script>
</html>code after making the setCounter (=modifier) function
• when you use the setCounter function, the whole component will be rendered again with the modified value
• the setCounter function will give data to the counter and trigger the render function
<!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);
//useState: will give data - counter, and will give function to modify the data - modifier (setCounter)
const onClick = () => {
//modifier function will change the value and trigger render again (rerender)
setCounter(counter+1);
};
return(
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App/>, root);
</script>
</html>#3.4 (State Functions)
first way of changing the state is to give a fixed value
const root = document.getElementById("root");
function App(){
const [counter, setCounter] =React.useState(0);
const onClick = () => {
setCounter(987);
};
return(
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App/>, root);output:
second way of changing the state is to utilize a function with 'current'
const root = document.getElementById("root");
function App(){
const [counter, setCounter] =React.useState(0);
const onClick = () => {
//setCounter(counter + 1);
//if you want to calculate the next state based on the current state, then you need to use the function
setCounter((current) => current +1);
};
return(
<div>
<h3>Total Clicks: {counter}</h3>
<button onClick={onClick}>Click me</button>
</div>
);
};
ReactDOM.render(<App/>, root);