React - useEffect

useEffect

컴포넌트가 랜더링 될 때 특정 작업을 실행할 수 있게 해주는 react hook

클래스형 컴포넌트의 생명주기 메소드의 역할을 대신한다

• 컴포넌트가 마운트 됐을 때 (처음 나타났을 때),
• 언마운트 됐을 때(사라질 때)
• 업데이트 됐을 때(특정 state, props가 바뀌었을 때)

[사용법]

useEffect(effect, [])

첫번째 인자(effect) : 함수 => 특정 상황이 왔을 때 실행되는 함수

두번째 인자 : => 의존성 배열

 

1. 의존성 배열이 없는 useEffect

useEffect(() => {
        console.log("의존성 배열이 없는 useEffect호출")
    })

이 코드를 실행해보면 다음 2가지 경우에 실행이 됐다

• 랜더링이 되었을 때
• state가 변경 될 때 

이는 각각 componentDidMount() & componentDidUpdate()의 역할을 대체할 수 있다.

 

Q. 여기서 왜  처음이랑(랜더링) state가 변경됐을 때(리랜더링) 실행이 된거지?

여기서 먼저 단어를 확실히 정리하고 가야함

컴포넌트가 처음 화면에 그려질 때를 "랜더링"이라고 하고

상태나 속성의 변경으로 컴포넌트가 다시 화면에 그려지는 걸 "리랜더링"이라고 한다

---

질문에 답을 하자면 

랜더링 + 리랜더링 = 모든 랜더링 임

그래서 의존성 배열이 없는 useEffect가 실행되는 경우는 모든 랜더링에 해당함

useEffect의 역할이 컴포넌트가 랜더링 된 후에 실행해야할 작업을 맡은 함수임

 

의존성 배열이 없는 useEffect는 모든 렌더링 후에 무조건 실행되도록 React가 설계되어 있음

이 동작방식 때문에 useEffect는 상태나 props가 변경될 때마다 변화 여부와 관계없이 매번 실행됨

 

useEffect는 의존성 배열에 따라서 실행 시점을 조절할 수 있음

• 의존성 배열이 없음  => 모든 랜더링 후 실행
• 빈배열 => 컴포넌트가 처음 마운트 될 때 한번만 실행
• 특정 값이 있을 경우 => 그 값이 변경될 때만 실행

Q. 그럼 왜 의존성 배열이 없으면 모든 랜더링 후에 실행이 되는거지?

의존성 배열이 없으면, React는 값의 변화를 추적할 기준이 없기 때문에, 렌더링이 될 때마다 실행하는 것

---

2. 빈 배열[ ]을 의존성배열로 가진 useEffect

useEffect(() => {
        console.log("빈배열을 의존성배열로 가진 useEffect호출")
    }, [])

이 코드를 실행해보면 다음 경우에 실행이 됐다

• 랜더링이 되었을 때 한번만 실행.(최초마운트)

이는 componentDidMount( )의 역할을 대체할 수 있다.

Q. 왜 빈 배열이 있으면 한 번만 실행될까?

앞에서 말했듯 React는 의존성 배열을 통해 값의 변화를 추적하는데 

빈 배열[ ]은 의존성으로 줄 값이 없다는 뜻임. 그래서 처음 생기고 난 후에는 바뀔 일이 없다

그래서 컴포넌트가 처음 마운트될 때 한 번 실행하고, 그 이후엔 의존할 값이 없기 때문에 더 이상 실행되지 않는 것.

---

3. 의존성 배열을 가진 useEffect

 

useEffect(() => {
        console.log(`${name} [name]의존성배열로 가진 useEffect호출`)
    }, [name])

 

 

랜더링이 됐을 때, name state가 변경되었을 때 실행된다.

>> componentDidMount와 componentDidUpdate의 역할을 대체할 수 있음 

Q. 왜 처음과 name state가 변경됐을 때 실행될까?

이제는 슬슬 알 거 같다

먼저 모든 useEffect는 랜더링될 때 모두 실행이 되고

[name]를 의존성 배열로 갖고 있으니까 name이 변경되면 값이 바뀌었기 때문에 다시 그려주는 것

---

4. 함수를 return하는 useEffect

useEffect(() => {
        return () => {
            console.log(`${name} 함수를 리턴하는 useEffect호출`)
        }
    }, [name])

컴포넌트가 제거되기 직전에 호출된다.

>> componentWillUnMount를 대신할 수 있음

Q. 왜 컴포넌트가 제거되기 직전에 호출되는거지?

[추측해보기]

자.. 그럼 왜 함수를 return하면 제거되기 직전에 호출이 될까..

먼저 useEffect의 역할은 컴포넌트가 랜더링 된 후 실행되어야할 작업들을 실행시키는 역할이지..

지금 내 생각에는 앞서 먼저 값이 변경된 컴포넌트들을 리랜더링 한 후에 이제 다른 함수를 실행시켜야하기 때문에?

함수를 리턴하는 useEffect를 맨 마지막에 배치한건가?

>> 틀렸음 ㅋㅋ

 

React에서 함수를 리턴하는 useEffect는 cleanUp작업을 담당하는 useEffect라고 약속이 돼있음

 

cleanUp작업이란?

컴포넌트가 제거되거나 특정 상태가 변경되기 직전에 리소스를 정리하고, 불필요한 작업이나 연결을 종료하는 것

# 해당 코드에서는 실행한 작업이 없기 때문에 clean up을 할 필요가 없음

 

그리고 함수를 리턴하는 useEffect는 마지막에 실행되어야할 함수를 실행한다.