useEffect (랜더링 또는 변수 값 변경될 때 실행되는 함수)

useEffect - React life cycle
react에서는 마운트, 언마운트 개념이 있습니다.
간단하게 설명하면 아래와 같습니다.
마운트 : 컴포넌트가 생길 때
언마운트 : 컴포넌트가 사라질 때
라고 생각하시면 편합니다.

useEffect란,
페이지가 맨 처음에 랜더링 될 때, 또는 변수의 값이 변경될 때 실행되는 함수이다.

클릭할 때마다 1씩 증가하는 간단한 버튼을 만들어보자.

Udemy 에서 되게 중요개념을 꼭 알아야한다고 함

We understand that the second argument is very significant.

useEffect(()=> {
    console.log(‘hi’);
}, []);

second argument: []
called after first render
Never called again

We understand that the arrow function is gonna be called.
on the initial render of component no matter what.

And then the second argument determines whether or not the arrow function is gonna be called again in the future.

[정리하면]
[] 이거는 나중에 또 불러지게되고
화살표함수는 처음으로만 딱 불러지게 된다.

Tricky things around useEffect

1. Understanding when our arrow function gets called

2. Understanding the arrow function’s return value

3. Understanding stale valuable references
"과거 값 참조의 이해"입니다.

"stale"은 일반적으로 "때묻은"이나 "노후한"이라는 뜻으로 사용되며, 코드에서는 "과거의" 값을 나타내는 경우가 많습니다.

codesandbox.io/hungry-fog0ev1ec


빈 배열을 전달하면 해당 useEffect는 컴포넌트가 처음 마운트될 때만 실행되고, 이후에는 종속성이 없기 때문에 다시 실행되지 않습니다.

종속성 목록에는 주로 useEffect가 의존하는 상태나 프롭스와 같은 값들이 들어갑니다. 이 값들 중 하나라도 변경되면 useEffect가 다시 실행됩니다. 종속성 목록에 있는 값들 중 하나라도 변경되지 않으면 효과는 계속해서 이전에 실행된 결과를 유지합니다. 이것은 효율적인 리소스 사용을 돕고 불필요한 업데이트를 방지하는 데 도움이 됩니다.


종속성 목록에 들어가는 것은 주로 컴포넌트가 의존하는 상태나 프롭스 등입니다. 예를 들어, 특정 상태가 변경될 때만 useEffect를 실행하고 싶다면 해당 상태를 배열에 포함시킬 수 있습니다.

import React, { useEffect, useState } from 'react';

const ExampleComponent = ({ someProp }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect ran!');

    // 여기에서 원하는 작업 수행

  }, [count, someProp]); // count와 someProp이 변경될 때만 useEffect 실행

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

이 경우, useEffect는 count나 someProp 중 하나라도 변경될 때에만 실행됩니다. 종속성 목록에 있는 값들 중 하나가 변경되지 않으면 useEffect는 실행되지 않습니다.

 

 

const ExampleComponent = ({ someProp }) => {
  const [count, setCount] = useState(0);

 

그러면 counter함수에 변화가 있을 떄마다 화살표함수가 다시 실행된다고함. 

 

ESLint is good, but be careful!