Lifecycle 은 클래서형에서는 compent의 메서드로, 함수형에서는 useEffect로 사용할 수 있다.
1. 그리기
2. 그리고 난 뒤 실행
3. 그리도 난 뒤 변경됐을 때
4. 그리고 난 뒤 사라질때
위의 예시처럼 a 실행시키고 바로 다음 동작을 명령시킬때 해당 동작만을 실행시킨다.
이것은 코드 작성을 간편하게 하는 것도 있지만, 다음 동작을 위해 전체 코드를 리렌더링하지 않고,
원하는 부분만 인식시켜 컴퓨터를 더 효율적으로 동작시키는 장점도 있다.
시작하기 전에 useEffect는 전체코드를 실행한 뒤 동작되는 메서드 인 점을 기억하자
class형 lifecycle
componentDidMount(): void {
// Component 의 기능
console.log("그려지고 나서 실행!!");
} componentDidUpdate(): void {
// Component 의 기능
console.log("변경되고 나서 실행!!");
} componentWillUnmount(): void {
// Component 의 기능
console.log("사라지기전에 실행");
// 예시) 채팅방 나가기 API, 나가기전에 마지막으로 할 것들
}
componentDidMount : 함수가 모두 그려지면 바로 실행된다. (최초 1회)
componentDidUpdate : 함수가 변경될 때마다 무한대로 실행된다.
componentWillUnmount : 해당 함수를 벗어나기 전에 1번 실행 ex) 채팅방 나가기 등
전체 함수에 적용하거나 함수안에 적용시켜서 사용이 가능할 것 같다.
onClickCountUp = (): void => {
// console.log(this.state.count);
this.setState({
count: 1,
});
};
onClickMove = (): void => {
void Router.push("/");
};
render(): JSX.Element {
return (
<>
<div>{this.state.count}</div>
<button onClick={this.onClickCountUp}>카운트 올리기!!</button>
<button onClick={this.onClickMove}>나가기!!</button>
</>
);
}
함수형 lifecycle
함수형은 Hooks 를 활용한 useEffect를 사용할 수 있다.
// 기본 모양
useEffect( () => {
실행시킬 함수 작성
},[ 반복 횟수 작성 ]);
" 반복 횟수 작성 " 공간에 아무것도 작성하지 않으면 의존성 배열로 초기에 한번만 실행되고 실행되지 않습니다.
" 반복 횟수 작성 " 공간 자체가 없을 경우 무엇이 바뀌던 바뀔때마다 무한적으로 다시 실행 시킵니다.
이때 componentDidUpdate와 다른점은, 처음 Mount 됐을 때도 한번 실행된다는 점입니다.
// useEffect 활용
useEffetc( () => {
console.log("그려지고 나서 실행!!")
return () => {
console.log("사라지기전에 실행!!");
};
});이렇게 "실행시킬 함수 작성" 공간에 return 을 추가하게 되면, 마치 class형의 componentWillUnmount 와 비슷하게 동작합니다.
useEffect의 잘못된 사용 방법
useEffect는 코드 순서와 상관없이 함수를 모두 그린 후 실행되는 특징을 가지고있습니다.
그럼 만약에 useEffect안에서 set을 사용하여 변수의 값을 변경시키면 어떻게 될까?
useEffect(() => {
setCount((prev) => prev + 1);
}, [count]);위 함수처럼 count 값이 변경될때마다 useEffect를 반복하고, useEffect는 계속해서 count + 1을 실행하므로 무한 루프에 빠지게 된다.
'리액트' 카테고리의 다른 글
| Pagination과 Infinite Scroll 설계 (0) | 2023.02.05 |
|---|---|
| useRef 어떻게 사용할까? (0) | 2023.02.05 |
| 클래스형(Class) 컴포넌트와 함수형(Functional) 컴포넌트 (0) | 2023.02.05 |
| state prev는 무엇일까? (0) | 2023.01.29 |
| Template Literals (템플릿 리터널 : ``) (0) | 2023.01.24 |
