React의 useEffect는 실제로 Effect인가요?

리액트 : 나는 당신을 선택합니다

저는 프레임워크의 Javascript 세계를 탐험하기 위해 My Starter Pokemon으로 React JS와 함께 나만의 여정을 시작했습니다. 처음 봤을 때, 명령형 DOM 조작 코드의 양이 엄청나게 줄어들었기 때문에 마음에 들었습니다. 저는 상태에 따라 DOM을 자동으로 조작하는 프레임워크 아이디어를 정말 좋아합니다.

처음에는 Snorlax를 무게로 이길 수 있는 React의 크기와 소비하는 메모리를 고려하지 않았습니다.
React를 배운 후 Vue, Angular, Svelte와 같은 많은 Framework를 접하게 되었습니다. 드디어 SolidJS에 이르자 눈이 떠졌습니다

저는 SolidJS의 저자인 Ryan Carniato의 라이브 스트림과 기사를 팔로우하기 시작했습니다. 그는 프레임워크를 보는 방식을 완전히 바꾸었습니다. 저는 Javascript Frameworks의 반응성 시스템을 이해하기 시작했습니다. 조금 뒤돌아서 My Starter Pokemon React와 반응성과 렌더링 시스템을 보고 웃음을 참을 수 없었습니다

처음부터 속은 것 같아요. State가 변경될 때마다 모든 것을 다시 실행해야 하는 이유는 무엇입니까? 그렇다면 부작용으로 작용하기 위해 useEffect라는 후크가 정말로 필요한 이유는 무엇입니까?

이제 기사 제목을 살펴보세요.

이 글의 제목을 React의 useEffect가 실제로 Effect인가요?라고 정했습니다. 베가펑크가 People about Government에 눈을 뜨게 되었습니다(OP 팬 여러분을 스포해서 죄송합니다). 이에 대해 비판할 생각도 많다. 그래서 오늘이 사용날입니다. 본명을 숨기고 가장 많이 거짓말을 한 이펙터.

초심자이거나 React 초보자에게 물어보면 useEffect에 대해

으로 설명해줍니다.

종속성 배열의 값이 변경될 때마다 다시 실행되는 함수입니다.

당신이 그 사람이라면, 당신이 잘못 배웠다는 사실을 알게 된 것은 정말 행운입니다. React는 무언가 변경될 때마다 다시 실행되므로 함수가 필요하지 않기 때문에 다시 실행할 필요가 없습니다. 여기에 대한 진실을 설명하겠습니다

효과는 실제로 무엇을 의미합니까?

효과가 실제로 무엇을 의미하는지 설명하겠습니다. Reactivity 시스템에서는 Effect를 실제로 Side Effect라고 부릅니다. 예부터 시작하겠습니다

const name = "John Doe"
createEffect(()=>{
    console.log("New name", name)
},[name])

여기서 createEffect 함수는 두 번째 인수의 Array 값이 변경될 때마다 다시 실행되는 함수를 허용합니다. 여기서 createEffect 내부의 함수는 이름의 부작용입니다. 즉, 함수는 상태 이름에 따라 달라집니다. name 값이 변경될 때마다 Side Effect가 다시 실행되어야 합니다. 이것이 바로 부작용의 내용입니다.

React는 실제로 무엇을 하는가?

React 측면에서도 같은 코드를 작성해보겠습니다

const [name, setName] = useState("John Doe")
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

setName이 호출될 때마다 useEffect가 다시 실행됩니다. 나는 그것을 완전히 이해합니다. 단순히 useEffect를 제거하여 동등한 코드를 제공하겠습니다. 또한 React의 useState가 반응 상태를 생성하지 않기 때문에 작동합니다

const [name, setName] = useState("John Doe")
console.log("New name", name)
setName("Jane Doe")

TADA! useState의 상태가 바뀔 때마다 다시 실행되기 때문에 React에서는 잘 작동합니다
변화. useEffect를 설명하기 위해 또 다른 예를 들어보겠습니다.

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
console.log("New name", name)
setAge(21)

이제 나이가 변경될 때마다 console.log("새 이름", 이름)도 실행되는데 이는 우리가 원하는 것과 다릅니다. 그래서 useEffect로 래핑합니다.

const [name, setName] = useState("John Doe")
const [age, setAge] = useState(18)
useEffect(()=>{
    console.log("New name", name)
},[name])
setName("Jane Doe")

현재는 수정되었습니다. 따라서 useEffect는 실제로 Effects와 정확히 반대되는 실행을 방지합니다. 나는 당신이 그것이 실제로 무엇을 하는지 이해하기를 바랍니다. useEffect에 대한 적절한 설명은 다음과 같습니다.

useEffect는 상태가 변경될 때만 실행할 수 있는 후크입니다

부작용 설명은 비슷하지만 동전의 반대면인줄 알았습니다.
부작용 설명중

부작용은 상태가 변경될 때마다 실행되는 함수입니다

Reactivity System에서는 Effects가 다시 실행되는 것 외에는 아무것도 없고, Effects는 상태가 바뀔 때마다 실행되는 기능입니다.

React에서 Effects rerun과 Effects를 제외한 모든 것은 종속 배열의 변경 없이 실행을 방지하는 기능입니다

마지막으로 useEffect의 실제 기능을 이해하시기 바랍니다. 위의 예는 효과가 필요하지 않을 수도 있는 최악의 사례로 명시되어 있습니다. 나는 그것을 완전히 이해합니다. 하지만 useEffect를 Effect로 사용하지 말라고 권하는 것 같습니다.

큰 거짓말

다음과 같이 설명됩니다

useEffect는 구성 요소를 외부 시스템과 동기화할 수 있는 React Hook입니다.

I can't totally get it because The Phrase synchronize with external system means

The system's internal state is updated to match the state of the external system.

But in reality, useEffect had nothing to do with that. useSyncExternalStore does works in problem with some quirks ( Really this problem can't be solved 100%. For now , save that for My Another article ).

Just think about this facts that React reruns code whenever state changes and useEffect is commonly used along with React state, Then Why do we need to run something based on a state? because always reruns whenever something changes.

I found a page named as Synchronizing with Effects at React Official Docs which explains about it . At there, They explained that as

Effects let you run some code after rendering so that you can synchronize your component with some system outside of React.

From above lines, It is clear that useEffect lets you write a function which executes after rendering of React. Then WTF it is named as useEffect? Does this had any kind of connection with Effect as it's name implies? It's more similar to window.onload of DOM API.

I still can't digest the example they gave

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

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  if (isPlaying) {
    ref.current.play();  // Calling these while rendering isn't allowed.
  } else {
    ref.current.pause(); // Also, this crashes.
  }

  return <video ref={ref} src={src} loop playsInline />;
}

export default function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <VideoPlayer
        isPlaying={isPlaying}
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      />
    </>
  );
}

Here is the reason the error If You try to run it

Runtime Error
App.js: Cannot read properties of null (reading 'pause') (9:16)

   6 |   if (isPlaying) {
   7 |     ref.current.play();  // Calling these while rendering isn't allowed.
   8 |   } else {
>  9 |     ref.current.pause(); // Also, this crashes.
                       ^
  10 |   }
  11 | 
  12 |   return <video ref={ref} src={src} loop playsInline />;

They told to us wrap it inside useEffect to solve this by

  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });

because ref.current is set to null before rendering. But I could solve this by simply changed it to

 if (isPlaying) {
   ref.current?.play();
 } else {
    ref.current?.pause();
 }

If It's that what they willing to do, They it should be named as onMount like Vuejs not useEffect because effects at other library like VueJS, SolidJS really does side effect.

Here is the explanation They connected the above example with synchronisation

In this example, The “external system” you synchronized to React state was the browser media API

Does that really make any sense? I still don't know Why used synchronized here?. Here Browser Media API is available after First Render So Then Why there is a necessary of Effect here? It's a Sick Example for Effect. I never thought They would explain Effect with Example Code.

Another Joke

Effects let you specify side effects that are caused by rendering itself, rather than by a particular event.

It found this under the title What are Effects and how are they different from events? and gave above example code for this. After understanding What React really does in name of Effect and reading My Explanation, Could you connect anything?. They gave explanation of Effect of Reactivity System But They did exactly opposite. This is what I always wanted to express to Others

Final Thoughts

I hope You understand What does Effect means? and What React does in name of Effect?. After thinking All this shits, I finally decided to call useEffect
as usePreventExecution. I knew that name given by me is sick ;-) . But It is nothing when compares to What They stated about it at Official Documentation. If You found any other suitable name, Let me know at Comments.

위 내용은 React의 useEffect는 실제로 Effect인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!