React주차 과제를 풀다가 멘탈이 너무 나갔지만 부트캠프 사람들의 도움을 받아서 공부를 하는 중이다.
다음은 useState를 연습한 내용이다.
import React,{useState} from "react";
const App = () => {
const [Count, setCount] = useState(0);
const up = () => {
(Count < 100) ? setCount(Count +1) : alert('100초과 안됨')
}
const down = () => {
(Count > 0) ? setCount(Count -1) : alert('0미만 안됨')
}
const tenup = () => {
(Count < 91) ? setCount(Count +10) : alert('100초과 안됨')
}
const tendown = () => {
(Count > 9) ? setCount(Count -10) : alert('0미만 안됨')
}
if(Count === 77){
console.log(Count)
alert('행운의 77!!!!!')
}
return (
<div>
<h2>클릭하면 숫자가 오른다(0~100) : {Count}</h2>
<p>
<button onClick={up}>숫자 업 ! 클릭 미</button>
<button onClick={tenup}>10 업 ! 클릭 미</button>
</p>
<p>
<button onClick={down}>숫자 다운 ! 클릭 미</button>
<button onClick={tendown}>10 다운 ! 클릭 미</button>
</p>
</div>
);
}
export default App;코드를 입력하세요
Count === 77 인 경우에 '행운의 77!!!!'을 alert해주었는데 여기서 문제가 발생했다.
76에서 1을 올려주는 버튼을 눌렀을 때, 행운의 77이라는 창이 뜨면서 console에 77이 입력되는 모습.
하지만 스크린 상에는 76이라고 뜬다.
그리고 확인 버튼을 누르면 다시 한 번 alert 창이 뜨면서 두 번째 창의 확인을 누르면
console에 77이 한 번 더 찍히면서 스크린 상의 숫자도 77로 바뀐다.
나는 alert창이 한 번만 뜨게 하고 싶어서 여러 연구를 해보다가
import React,{useState} from "react";
const App = () => {
const [Count, setCount] = useState(0);
const up = () => {
(Count < 100) ? setCount(Count +1) : alert('100초과 안됨')
//이곳
}
const down = () => {
(Count > 0) ? setCount(Count -1) : alert('0미만 안됨')
//이곳
}
const tenup = () => {
(Count < 91) ? setCount(Count +10) : alert('100초과 안됨')
//이곳
}
const tendown = () => {
(Count > 9) ? setCount(Count -10) : alert('0미만 안됨')
//이곳
}
//count === 77이 원래 있던 자리//
return (
<div>
<h2>클릭하면 숫자가 오른다(0~100) : {Count}</h2>
<p>
<button onClick={up}>숫자 업 ! 클릭 미</button>
<button onClick={tenup}>10 업 ! 클릭 미</button>
</p>
<p>
<button onClick={down}>숫자 다운 ! 클릭 미</button>
<button onClick={tendown}>10 다운 ! 클릭 미</button>
</p>
</div>
);
}
export default App;코드를 입력하세요
위 코드 상의 //이곳 이라고 표시된 곳에 console.log(Count)를 하면 1번만 나온다는 것을 발견했다.
처음에 Count가 2번 찍히는 것을 3가지 경우로 예측해 보았다.
버튼을 누르면서 Count가 렌더링 된다. --> 이 때 77이 되면서 alert가 뜸.
그 후에 alert가 새로고침이 되면서 다시 한 번 77이란 값을 받아 alert가 한 번 더 뜸.
버튼을 누르면서 Count가 렌더링이 된다.--> 이 때 77이 되면서 alert가 뜸.
그런데 return 값의 div에도 {Count}가 있어서 alert가 한 번 더 뜸.
렌더링에 순서가 있어서 function의 순서와 다른 순서로 렌더링이 되면서 2번 뜸
음.. 그런데 1번의 경우에는 alert가 새로고침을 해준다면 무한으로 alert가 뜨는게 맞지 않나? 라는 생각도 들고,,, 무엇보다 삼항연산자에서도 alert를 사용했는데 이 경우에는 alert가 한 번만 뜬다.
2번의 경우도 console.log({Count})를 하면 {Count: 77}로 나오는데 연관이 없는 것 같다.
결국 내 결론은 3번이었고 해결하기 위해 하나로 묶을 필요가 있다는 생각이 들었다.
검증 전에 혹시 몰라 각 삼항연상자에 Console.log(Count)로 찍어봤다.
import React,{useState} from "react";
const App = () => {
const [Count, setCount] = useState(0);
const up = () => {
(Count < 100) ? setCount(Count +1) : alert('100초과 안됨')
console.log('1번'+Count)
}
const down = () => {
(Count > 0) ? setCount(Count -1) : alert('0미만 안됨')
console.log('2번'+Count)
}
const tenup = () => {
(Count < 91) ? setCount(Count +10) : alert('100초과 안됨')
console.log('3번'+Count)
}
const tendown = () => {
(Count > 9) ? setCount(Count -10) : alert('0미만 안됨')
console.log('4번'+Count)
}
if(Count === 77){
console.log('5번'+Count)
alert('행운의 77!!!!!')
}
return (
<div>
<h2>클릭하면 숫자가 오른다(0~100) : {Count}</h2>
<p>
<button onClick={up}>숫자 업 ! 클릭 미</button>
<button onClick={tenup}>10 업 ! 클릭 미</button>
</p>
<p>
<button onClick={down}>숫자 다운 ! 클릭 미</button>
<button onClick={tendown}>10 다운 ! 클릭 미</button>
</p>
</div>
);
}
export default App;
이 경우에서 신기한 사실을 발견했는데, console.log를 각 삼항연산자에 모두 넣었음에도 불구하고 버튼을 누를 때 해당 버튼에 onClick event가 발생한 곳만 console에 나온다.
......
더욱 복잡해진 것 같지만, 일단은 Count가 각 버튼을 누를때 해당 onClick에서만 렌더링 된다는 것임을 알았고 해결 방법으로는 모든 경우에 if(Count === 77)을 추가하는 방법을 선택했다.
그런데 또 신기한 건, 위 5번 Console.log(Count)처럼 밖에서 Count를 Console하면 스크린 상에 클릭하면 숫자가 오른다(0~100) : {Count}의 {Count}와 console.log(Count)의 Count가 동일하게 뜨는 반면에, 삼항연산자 안에서는 1의 차이가 발생하는 것을 발견했다.
즉, 예를 들어 화면상의 숫자가 77이지만 삼항연산자 안에서 Count는 76인 것이고
함수 밖의 Count에서는 77인 것이었다.
아마 삼항연산자 안에서는 Count+1 Count-1 등과 같은 실행을 해주기 때문에 화면상의 차이가 발생하는 것 같았다.
이야기가 딴 곳으로 샜는데,, 어찌됐든 alert가 두 번 나오는 것은 삼항연산자 안에 넣어줌으로써 해결되었다.
방금 설명했듯이, 1또는 10의 차이를 감안하여 77을 유도하도록 코드를 다음과 같이 수정하면 된다.
import React,{useState} from "react";
const App = () => {
const [Count, setCount] = useState(0);
const up = () => {
(Count < 100) ? setCount(Count +1) : alert('100초과 안됨')
if(Count === 76){
alert('행운의 77!!!!!')
}
}
const down = () => {
(Count > 0) ? setCount(Count -1) : alert('0미만 안됨')
if(Count === 78){
alert('행운의 77!!!!!')
}
}
const tenup = () => {
(Count < 91) ? setCount(Count +10) : alert('100초과 안됨')
if(Count === 67){
alert('행운의 77!!!!!')
}
}
const tendown = () => {
(Count > 9) ? setCount(Count -10) : alert('0미만 안됨')
if(Count === 87){
alert('행운의 77!!!!!')
}
}
return (
<div>
<h2>클릭하면 숫자가 오른다(0~100) : {Count}</h2>
<p>
<button onClick={up}>숫자 업 ! 클릭 미</button>
<button onClick={tenup}>10 업 ! 클릭 미</button>
</p>
<p>
<button onClick={down}>숫자 다운 ! 클릭 미</button>
<button onClick={tendown}>10 다운 ! 클릭 미</button>
</p>
</div>
);
}
export default App;