230117 React Hook useEffect()
useEffect(실행시킬 콜백함수, 값에 따른 렌더링 지정)
-첫번째 매개변수는 실행시킬 콜백함수
-두번째 매개변수는 배열[]을 사용하여 특정값이 update될 때만 실행시켜 줄 수 있음.
★useEffect()는 컴포넌트의 라이프 사이클을 다룬다.
-라이프 사이클: 생명주기. 컴포넌트가 생겼다 사라지는 주기.
-mount: 화면이 올라갔을 때(화면이 만들어졌을 때)
리액트 컴포넌트가 mount, mount이후, state변경될 때, unmount때마다 특정작업을 수행한다.
클래스형과 함수형 비교하기
클래스형
- 컴포넌트가 생성될 때-componentDidMount
- 컴포넌트가 업데이트할때-state가 체인지되거나 props를 받을 때 리렌더링을 함.-componentDidUpdate
- 컴포넌트가 제거될 때-componentWillUnmount
함수형
componentDidMount대체
useEffect( () => {
console.log(`렌더링완료`);
});=>컴포넌트가 생성될 때(mount), 렌더링 될 때마다 실행됨
useEffect( () => {
console.log(`처음만 실행됩니다`);
},[]);
=>두번째 매개변수 배열을 주면 mount이후 딱 한번만 실행된다.
componentDidUpdate대체
특정값이 업데이트 될 때만 실행해주려면 두번째 매개변수에 값을 state값을 지정합니다
useEffect( () => {
console.log(`name이 업데이트 시 실행됩니다`)
}, [name]);=>처음 mount된 이후에도 한번은 실행된다.
=>state의 name값이 변하면 함수가 실행된다.
=>state를 배열안에 여러개 넣을 수도 있다.
componentWillUnmount대체
컴포넌트가 화면에서 사라지기 직전에 호출됨
useEffect( () => {
console.log(`name이 업데이트 시 실행됩니다`)
return () => {
console.log(`unmount에 실행됩니다.`);
}
}, [name]);
=>return을 주면 된다! 컴포넌트가 사라지기 전에 한번 실행됨.
=>state가 바뀔 때 실행되는 이유?
화면이 리렌더링 된다는 건 기존의 컴포넌트가 사라지는 것. 때문에 state가 바뀔 때마다도 실행됨
return함수 내에서 state를 출력하면, state는 직전값이 나온다.
조건을 상위 컴포넌트에 세워주면, 하위컴포넌트를 state에 따라 보이게 했다가 안보이게 했다가 하는 것이 가능.
App.js
import { useState } from "react";
import HookEffect from "./hook/HookEffect";
import HookQ from "./hook/HookQ";
import HookQ2 from "./hook/HookQ2";
import HookReducer from "./hook/HookReducer";
import HookReducer2 from "./hook/HookReducer2";
import HookRef from "./hook/HookRef";
const App = () => {
/*
p.223
1. 필수훅
useState()
컴포넌트에서 상태값을 제어하는 가장 기본이 되는 hook
useEffect()
컴포넌트의 라이프사이클(생명주기)를 다룹니다.
mount, mount이후, state변경될 때, unmount이전에 특정작업을 수행할 수 있습니다.
2. 부가적인 훅
useReducer()
useState의 사용을 외부에서 사용할 수 있게 해주는 훅(state의 변경을 외부에서 제어할 수 있습니다.)
const [현재값, 리듀서를 업데이트할 수 있는 함수]=useReducer(외부에서 사용할 리듀서함수, 리듀서의 초기값)
*/
const [visible, setVisible] = useState(true);
const handleClick = () => {
setVisible(!visible); //visible이 가진 값의 반대
}
return (
<>
{/* effect훅 */}
<button onClick={handleClick}>{visible ? 'hide' : 'show'}</button>
<br />
{visible ? <HookEffect /> : null}
<hr />
{/* ref훅 */}
<HookRef />
{/* 훅실습 */}
<hr />
<HookQ />
<hr />
<HookQ2 />
{/* reducer훅 */}
<hr />
<HookReducer />
<hr />
<HookReducer2/>
</>
)
}
export default App;에서
const [visible, setVisible] = useState(true);
const handleClick = () => {
setVisible(!visible); //visible이 가진 값의 반대
}
return (
<>
{/* effect훅 */}
<button onClick={handleClick}>{visible ? 'hide' : 'show'}</button>
<br />
{visible ? <HookEffect /> : null}
</>
)구문을 통해 버튼을 누르면 컴포넌트를 숨기고 보이게 하는 것이 가능.
이때, 숨겨질 때 unmount됐다는 구문이 콘솔창에 출력된다.
import { useEffect, useState } from "react";
const HookEffect = () => {
//useStaet 훅
const [name, setName] = useState('');
const [age, setAge] = useState('');
const handleName = (e) => {
setName(e.target.value)
}
const handleAge = (e) => {
setAge(e.target.value)
}
//useEffect(함수)-화면이 mount된 이후에 동작됩니다.
/*
useEffect(() => {
console.log(`렌더링완료. state값 ${name} ${age}`)
})
console.log(111);//순서비교용
*/
//useEffect(함수,[])- 화면이 첫번째 mount에서만 실행됩니다.
/*
useEffect(()=>{
console.log(`처음만 실행됩니다.`)
},[])
*/
//useEffect(함수,[state]) - 특정값이 렌더링 될때만 실행됩니다. 처음 mount된 이후에도 한번 실행됩니다.
/*
useEffect(()=>{
console.log(`age or name이 변경될 때 실행됩니다`)
},[age, name])
*/
useEffect(()=>{
console.log("name이 변경될 때 실행됩니다.")
//컴포넌트가 unmount될 때 render됩니다.
return ()=>{
console.log(`unmount됩니다`)//렌더링이 그려지면, 기존화면은 지워집니다.
console.log(`update전 값:${name}`)//state는 직전값이 나옵니다.
}
},[name]);
//★★useEffect는 여러개여도 됩니다.★
return (
<>
이름: <input type="text" onChange={handleName} /><br />
나이: <input type="number" onChange={handleAge} /><br />
이름: {name}, 나이: {age}
</>
)
}
export default HookEffect;
정리하자면...
useEffect()는 console.log(111)이 먼저 실행된 이후 useEffect안의 함수가 실행된다.
useEffect(함수)로 하면 처음(mount)과 state가 변할 때마다 실행된다.
useEffect(함수,[])로 하면 처음만 실행되고, state값이 변할 때는 실행되지 않는다.
useEffect(함수,[state])로 하면 처음과 해당 state가 변할 때마다 실행된다. 배열안에 state를 여러개 넣을 수 있다.
useEffect(함수) 안에 return()이 있으면 return의 ()안에 있는 내용이 화면이 사라질 때 실행된다. 이때 state를 출력하면 직전값이 출력된다.
useEffect는 여러개일 수도 있다!
//물론 많다고 좋은 건 아니긴 함