[ react] #7 Hooks useEffect
2024.03.06
북마크 작성자 정보
작성일/수정일
2024-03-06 14:12:47 / 2024-03-06 14:12:47
7.2 use Effect
useEffect는 react component가 랜더링 될때마다 특정 작업을 수행 하도록 설정할 수 있는 Hook
Class Componet의 componentDidMount와 componentDidUpdate를 합친 형태
import { useState, useEffect } from "react";
export default function Art2(){
let [name2, setName2 ] = useState("");
let [nickname2, setNickname2] = useState("");
// useEffect(
// () => {
// console.log("Rendering 완료!");
// console.log("name2 => ", name2);
// console.log("nickname2 => ", nickname2);
// });
/* 처음 랜터링만 실행, 업데이트 실행 안함 끝에 배열을 넣어준다. */
// useEffect(
// () => {
// console.log("Rendering 완료!");
// console.log("name2 => ", name2);
// console.log("nickname2 => ", nickname2 );
// },[])
/* 특정 값([name2]) Update만 실행 */
useEffect(() => { console.log("effect");
console.log("name2 => ", name2 );
return () => {
console.log("cleanup!");
console.log("name2 => ", name2);
}
},[name2]);
return(
<article>
<div className="art_area">
<div className="art_head">
RIDAGI 8.2 useEffect
</div>
<div className="art_body">
<div className="inpt_area">
<input name="name2" value={name2} placeholder="이름2" className="inpt_brd" onChange={ e => {
setName2(e.target.value);
console.log("name2 : ", e.target.value);
}} />
</div>
<div className="inpt_area">
<input name="nickname2" value={nickname2} placeholder="닉네임2" className="inpt_brd" onChange={ e => {
setNickname2( e.target.value);
console.log("nickname2 : ", e.target.value);
}}/>
</div>
</div>
<div className="art_body">
<div className="inpt_area">
이름2 : {name2}
</div>
<div className="inpt_area">
닉네임2 : {nickname2}
</div>
</div>
</div>
</article>
);
}