[문법] useEffect

useEffect 란?

- 사이드 이펙트(side effects)를 처리하기 위해 사용하는 Hook

- 컴포넌트가 렌더링되거나 상태가 변경될 때 특정 작업을 수행하도록 설정

 

 

✔ 좋아요 클릭시 좋아요 클릭 수 변경

 

🚫 처음 시도 오류 🚫

🚫코드 👇

import { useState, useEffect } from 'react'
import './App.css'

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [like, setLike] = useState([0, 0, 3]);

  useEffect(() => {
    console.log(like);
  }, [like])

  return (
    <>
      <div>
        {구이름.map((a, index) =>
          <Div key={index}
            index={index}
            구이름={구이름}
            like={like[index]}
            setLike={setLike}
          />
        )}
      </div>
    </>
  )
}

function Div({ index, 구이름, like, setLike }){
  const likeCount = setLike(like + 1);
  return(
    <>
      <div style={{ marginTop: '10px' }}>
        <span>{구이름[index]}</span>
        <button onClick={likeCount}>💙 <span>{like}</span></button>
      </div>
    </>
  )
}

export default App;

 

 

🚫결과 👇

 

경고: 다른 구성 요소('Div')를 렌더링하는 동안 구성 요소('App')를 업데이트할 수 없습니다. 'Div' 내에서 잘못된 setState() 호출을 찾으려면 설명된 스택 추적을 따르세요

 

👩🏻 문제 원인 ❗❗

const likeCount = setLike(like + 1);

=> setLike를 컴포넌트 렌더링 중에 호출하고 있어서 상태 업데이트가 발생 -> 다시 렌더링을 트리거하여 무한 루프 위험

 

👩🏻 해결 방법 ❕❕

setLike를 이벤트 핸들러 내부에서 호출

 

수정 코드 👇

import { useState, useEffect } from 'react'
import './App.css'

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [like, setLike] = useState([0, 0, 3]);

  useEffect(() => {
    console.log(like);
  }, [like])

  return (
    <>
      <div>
        {구이름.map((a, index) =>
          <Div key={index}
            index={index}
            구이름={구이름}
            like={like[index]}
            setLike={setLike}
          />
        )}
      </div>
    </>
  )
}

function Div({ index, 구이름, like, setLike }){
  const likeCount = () => { ✅
    setLike((prevLikes) => {
      const updateLikes = [...prevLikes];
      updateLikes[index] = updateLikes[index] + 1;
      return updateLikes;
    })
  };
  return(
    <>
      <div style={{ marginTop: '10px' }}>
        <span>{구이름[index]}</span>
        <button onClick={likeCount}>💙 <span>{like}</span></button>
      </div>
    </>
  )
}

export default App;

 

 

setLike 안에 (prevLikes) 는 현재 like 값을 담아주기위해 스프레드 문법을 사용해서 현재 값을 가져와서 updateLikes에 담아준다! 그리고 그 안에서 변경을 시켜야한다.

 

👩🏻:

❓  왜냐고?

 

이전 상태를 복사하는 이유는 React 상태의 불변성을 유지하기 위해!

다른데에서도 그렇겠지만 처음 원래 선언 되었던 값은 바꾸지 않는 게 좋다고 한다!

=> let [like, setLike] = useState([0, 0, 3]); 이부분이 바뀌지 않으면서 새로운 변수에 값을 담아서 그 곳에서 변경한 값을 다시 담아서 내보낸다!

 

 

결과 👇

 

원하는 대로 잘 나온다~ >.,<