티스토리 뷰
728x90
리액트를 처음 배우면서 useState는 어렵지 않게 이해 할 수 있었는데, useEffect는 공식문서를 봐도 정확히 이해가 가지 않았다.
그래서 정리해본다.useEffect는 한마디로 말하면 "랜더링이 될 때마다 실행 된다" 이다.
기본형
button 누르면 count의 값이 1씩 증가하는 코드이다.
import React, {useEffect, useState} from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(()=> {
console.log(count);
})
const increment = () => {
setCount(count+1);
}
return (
<div className="App">
<button onClick={increment}>button</button>
</div>
);
}
export default App;
랜더링이 된 후 useEffect가 실행 되므로 처음에 콘솔에 찍히는 값은 0이고, 그 후 버튼을 누를 때마다 1씩 증가하여 콘솔에 출력된다.
새로운 state를 추가해서 똑같이 클릭 할때마다 1씩 증가하게 만들어보자
import React, {useEffect, useState} from 'react';
function App() {
const [count, setCount] = useState(0);
const [test, setTest] = useState(0);
useEffect(()=> {
console.log(count);
})
const increment = () => {
setCount(count+1);
}
return (
<div className="App">
<button onClick={increment}>count</button>
<button onClick={()=>{setTest(test+1)}}>test</button>
</div>
);
}
export default App;
위 코드를 실행시켜 test 버튼을 누르면, 누를 때마다 랜더링이 되는 데, 그 때 콘솔에 count의 값인 0이 계속 찍히는 것을 볼 수 있다.
useEffect를 count가 변경 될 때만 실행시키기 : [state]
useEffect의 두번째 파라미터로 array를 넣어주고 변경 될 state를 적어주면 된다.
useEffect(()=> {
console.log(count);
},[count])
이렇게 변경 시키면 test를 아무리 눌러도 콘솔에 count가 찍히지 않는다.(맨 처음 랜더링 시에만 콘솔에 출력)
count와 test가 둘 다 변경 될 때 마다 실행 시키고 싶으면, array안에 같이 넣어주면 된다.
useEffect(()=> {
console.log(count);
},[count,test])
useEffect를 첫 랜더링 시에만 시키기 : []
두번째 인자로, 빈 array를 넣어주면 첫 랜더링 시에만 실행되고, 그 이후에는 실행 되지 않는다!
useEffect(()=> {
console.log(count);
},[])
'프론트엔드 > react' 카테고리의 다른 글
[Hook] useMemo (0) | 2022.03.19 |
---|---|
[Hook] useRef (0) | 2022.01.31 |
[react] useContext (0) | 2022.01.13 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- springboot
- java 코테
- centos
- 코테
- 리액트
- 오토에버코테
- 현대
- react
- softeer
- 현대코테
- 도커
- 자바
- softeer java
- 스프링
- mysql
- 쿠버네티스
- Spring
- 자바스크립트
- 자바코테
- tomcat
- 현대오토에버
- 톰캣
- javascript
- 전자정부프레임워크
- Kubernetes
- Linux
- java
- 아파치카프카
- Docker
- 코딩테스트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함