Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- addEventListener
- 혼프
- database
- 게임
- object
- Project
- json
- Porject
- JS #프로젝트
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- slow and steady
- db
- eport
- 비동기
- callback
- Import
- mysql
- https://m.blog.naver.com/tt2t2am1118/221010125300
- webpack
- sql
- 동기
- await
- ajax
- prj
- promise
- 참고블로그
- async
- js
- execCommand
- setTimeout()
Archives
- Today
- Total
C-log
⚛️React Training - section05 : useEffect 본문
728x90
이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자
import { useEffect } from "react";
export default function SubApp() {
function onClick() {
console.log("Click!");
}
console.log("I run all the time");
useEffect(() => {
console.log("Call The Api..");
}, [])
return (
<>
<h1>useEffect</h1>
<button onClick={onClick}>Click me</button>
</>
)
}
SubApp.js:7 I run all the time
SubApp.js:9 Call The Api..
SubApp.js:9 Call The Api..
//클릭시 호출 되는 함수
SubApp.js:5 Click!
우선 해당 코드를 살펴보면 먼저 렌더링이 되는 것은 'I run all the time'이라는 것을 알 수 있다. 해당 컴포넌트가 렌더링 되었고 이후 useEffect에 있는 'Call The Api..'가 호출 되었다. 여기서 useEffect는 한번만 호출이 되는 것을 알 수 있다. 이제 이를 응용해서 특정 영역에 서만 호출이 될 수 있게 해보자. 아래 코드를 살펴보자.
import { useState, useEffect } from "react";
export default function SubApp() {
const [counter, setCount] = useState(0);
const [keyword, setKeyWord] = useState("");
const onClick = () => setCount((prev) => prev + 1);
const onChange = (event) => setKeyWord(event.target.value);
useEffect(() => {
console.log("I run only once.");
}, []);
useEffect(() => {
console.log("I run when 'keyword' changes.")
}, [keyword]);
useEffect(() => {
console.log("I run when 'counter' changes.")
}, [counter]);
useEffect(() => {
console.log("I run when keyword & counter change");
}, [keyword, counter])
return (
<>
<input onChange={onChange}></input>
<h1>{counter}</h1>
<button onClick={onClick}>Click me</button>
</>
)
}
SubApp.js:12 I run only once.
SubApp.js:22 I run when 'keyword' changes.
SubApp.js:26 I run when 'counter' changes.
SubApp.js:30 I run when keyword & counter change
SubApp.js:22 I run when 'keyword' changes.
SubApp.js:26 I run when 'counter' changes.
SubApp.js:30 I run when keyword & counter change
//버튼 클릭시
SubApp.js:26 I run when 'counter' changes.
SubApp.js:30 I run when keyword & counter change
SubApp.js:30 I run when keyword & counter change
해당 코드를 살펴보면 useEffect들 모드 한번씩 호출이 되었음을 알 수 있다. 하지만 두 번째 인자로 주어지는 '[ ]'안에 있는 useState의 값이 변동되면 useEffect가 반응을 하는 것을 확인해 볼 수 있다. 이로인해 useEffect는 특정 state의 변화로 호출 할 수 있다는 것을 알 았다. 우리는 여기서 한번 Memo함수와 useEffect의 차이를 생각해 볼 필요가 있다.
728x90
'⚛️React > ⚡ver.2' 카테고리의 다른 글
⚛️React Training - section06 : ToDo List (0) | 2024.02.05 |
---|---|
⚛️React Training - section05 : useEffect - CleanUp function (0) | 2024.02.05 |
⚛️React Training - section04 : propsTypes (0) | 2024.02.03 |
⚛️React Training - section04 : Memo (0) | 2024.02.03 |
⚛️React Training - section04 : Props와 Components (0) | 2024.02.03 |
Comments