react useEffect 2
useEffect에 대해 좀더 정리.
1.useEffect 실행조건
useEffect(()=>{ 실행할코드 }, [count])카운트는 실행조건이 되는 state로 가정.
저 state는 여러개가 될수있음.
즉 실행조건이 여러개가 될 수 있음.
첫 마운트시 and count state가 변할때 코드가 실행됨(뭔가 do while과도 비슷한거같음).
실행조건을 주게되면, 재렌더링을 시키더라도 동작하지않음.
굳이 여러번 쓸 필요가 없을때,
혹은 특정용도에서만 사용되도록 내가 컨트롤하고싶을때 사용하면될듯.
아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행안됨.
2. clean up function
useEffect에서 재렌더링시(마운트시말고) 실행되는 함수.
useEffect return안에서 실행됨.
그래서 이걸 언제쓰냐?
재렌더링시 기존에 돌아가던, 중복되면 안되는 코드들을 지우는데 사용됨.
리액트는 재렌더링이 잦음.
useEffect는 마운트와 재렌더링시 내부코드를 실행시킴.
서버에서 데이터를 불러오기, 소켓연결, 타이머생성 등의 코드를 useEffect 내부에 적어뒀다면
이게 재렌더링, 그러니까 뭐 버튼 state 변경때마다 불러오게되는데,
이럴경우 최신요청이 아닌 이전요청은 계속 진행할 필요가 없음.
따라서 여기에 특정 행위 중지/삭제등의 코드를 주면 무의미한 데이터불러오기등을 막을수 있을듯.
빡통식정리
마운트시 1회만 실행시키려면
useEffect(()=>{ 실행할코드 }, [])마운트/재렌더링시 계속 코드 실행시키려면
useEffect(()=>{ 실행할코드 })마운트시/특정state 변경 등에만 코드 실행시키려면
useEffect(()=>{ 실행할코드 }, [조건])unmount시 코드 실행시키려면
useEffect(()=>{
return ()=>{
실행할코드
}
})컴포넌트 unmount시 1회 실행(특정코드없음. clean up function만있음)
useEffect(()=>{
return ()=>{
실행할코드
}
}, [])오늘의 숙제
하나 만들고 거기에 유저가 숫자 말고 다른걸 입력하면
"그러지마세요"라는 안내메세지를 출력
필요한거
1.입력창 컴포넌트. 이건useEffect에 없어도됨.
2.입력값을 받는 let inputString 변수.
2.숫자인지 문자인지 체크를 위한 isNumber state
- isNumber state변경시 동작하는 numberCheckFunc 함수
input창에 입력시 동작.
숫자면 true, inputString에 숫자 추가.
문자면 false, isNumber state 변경.
isNumber state가 false면, 안내메시지를 alert창으로 출력.
isNumber state
numberCheckFunc 함수
useEffect(()=>{
inputString = ""
return ()=>{
inputString 내용 지우기
}
}, [isNumber])내가 한거
이리저리 해보다가 막혀서, GPT한테 물어봐서 품.
input 태그에 onchange 뭍히고, 함수 엮어서 isNaN으로 체크하도록.
useEffect는 대체 뭘 써야할지 모르겠어서 대충 input state 박아놓음
const [inputValue, setInputValue] = useState("");
//입력된 값이 숫자인지 체크.
const numberCheckFunc = (e) => {
const newInputValue = e.target.value;
if (isNaN(newInputValue)) {
alert("그러지마세요");
} else {
setInputValue(inputValue);
}
};
useEffect(() => {
let inputString = "";
let timer = setTimeout(() => {
전등누르기(false);
}, 2000);
//재렌더링시 input 내용 지우기
return () => {
inputString = "";
clearTimeout(timer);
};
}, [inputValue]);
.
.
.
<div>
<input
type="text"
value={inputValue}
onChange={numberCheckFunc}
placeholder="숫자만 입력해주세요"
></input>
</div>
여기서 발생한 문제.
문자를 치면 alert는 잘 나오는데, 숫자를 치면 input에 값이 안들어감....
해답
input에 들어오는 값을 체크할 num state 하나 생성.
useEffect로 마운트, num 변경시에 안의 코드가 동작하도록 함.
(굳이 여러번 실행될 코드가 아니긴함. input이 변경될때 빼곤).
input에는 onChange로 뭔가 변경이 있으면 setNum으로 값을 던짐.
- setNum으로 num 값이 변경됨. num이 변경됐으므로 useEffect안의 코드가 실행됨.
- 변경된 값이 숫자가 아닌지 isNaN으로 체크. true 뱉어내면 "그러지마세요" 알림.
let [num, setNum] = useState("");
useEffect(() => {
//input 숫자
if (isNaN(num) == true) {
alert("그러지마세요");
}
}, [num]);
.
.
.
<input
type="text"
onChange={(e) => {
setNum(e.target.value);
}}
placeholder="숫자만 입력해주세요"
></input>와 난 어케 저렇게 심플하게 코딩하지.
