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
- 문자열 중복
- 중복 문자열
- 객체의 밸류값만 찾기
- 중첩배열
- 중복된 단어
- 5.3.8 Modifying Queries
- 아래로펼치기
- 중복단어제거
- 우분투 시간 변경
- 배엘에서 스왑
- 객체의키값만 찾기
- indexOf()
- 깃 토큰 만료
- 스프링 데이타 JPA
- ...점점점문법
- 제로베이스
- 중첩배열평탄화
- 중복문자제거
- 레디스 확인
- 코딩 어?
- js 문자열을 문자배열로
- 재귀스왑
- @Moditying @Query
- lastIndexOf()
- 단어 제거
- 시퀄 문법
- 문자열순서바꾸기
- 프론트엔드 스쿨
- ubuntu타임존
- sql 문자열 패턴 검색
Archives
- Today
- Total
코딩기록
useEffect 본문
728x90
import "./App.css";
import React, { useEffect, useState } from "react";
// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함.
/*
mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 )
unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 )
update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )
*/
function App() {
const [count, setCount] = useState(0);
// mount => []빈배열은 App()이 로딩될때 초기에 딱, 한번만! 호출됨.
useEffect(() => console.log("hello"), []);
// unmount => 두번째 인자가 없음. useEffect에서 console.log('hello') 함수를 바로 리턴-
// App()함수에서 unmount라고 인식함.
useEffect(() => console.log("hello"));
// update => [count]가 변할때 마다 console.log('hello')가 호출됨.
useEffect(() => console.log("hello"), [count]);
return (
<div className="App">
<span>{count}</span>
<button onClick={() => setCount(count +1)}>+</button>
</div>
);
}
export default App;
update- 5에서 콘솔
import "./App.css";
import React, { useEffect, useState } from "react";
// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함.
/*
mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 )
unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 )
update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )
*/
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
if (count === 5) {
console.log('this is five');
}
}, [count]);
return (
<div className="App">
<span>{count}</span>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
export default App;
반응형
'프론트' 카테고리의 다른 글
테스트 앱을 이용한 kakao map api 사용 방법 (2) | 2025.05.29 |
---|---|
css) 가운데 맞추는 공식 position, display: flex (0) | 2025.05.20 |
React) Vite 프로젝트와 Next.js 프로젝트 차이 (0) | 2025.03.25 |
.ts 와 .tsx 의 차이 (0) | 2025.03.21 |
JavaScript를 공부하면서 느낀점 (0) | 2024.12.31 |
Comments