리액트 useEffect 완벽가이드 props와 state

리액트의 함수형 컴포넌트를 사용 시에 꼭 사용하게 되는 useEffect에 대해서 글을 읽다

정리한 내용이 없어 천천히 다시 공부하며 정리할려고 한다.

useEffect의 대해서는에  화면에 렌더링이 완료된 후에 수행 전달된 함수를 수행하며

의존성 배열을 통해 특정 상황에 맞게 수행하도록 할 수 있다는 정도로 알고 있었다.

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useeffect 

Hooks API Reference – React

 

https://overreacted.io/ko/a-complete-guide-to-useeffect/

useEffect 완벽 가이드

 

위에 블로그 useEffect 완벽 가이드를 읽으며 useEffect에 대해 생각하는 시간을 가지게 되었다.

 

모든 랜더링은 고유의 Prop과 State가 있다.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

해당 코드에서의  count 는 useState에 의해 state의 변화를 관찰하여 자동으로 업데이트하게 되는데 어떻게?? 동작하는 걸까

count의 state를 업데이트할 때마다, 리액트는 컴포넌트를 호출하며, 매 랜더 결과물은 고유의 counter상태 값을 “살펴본다”.
그리고 이 값은 함수 안에상수로 존재하는 값일 뿐이며 어떠한 데이터 바인딩도 수행하지 않는다.

 뷰와 모델을 하나로 묶어 연결하는 것을 데이터 바인딩(Data Binding)이라고 부른다.
특정 랜더링 시 그 안에 있는count상수는 시간이 지난다고 바뀌는 것이 아니라, 컴포넌트가 다시 호출되고
각각의 랜더링마다 격리된 고유의 count값을 “보는” 것이다.

 

모든 랜더링은 고유의 이벤트 핸들러를 가진다.

function Counter() {
  const [count, setCount] = useState(0);

  function handleAlertClick() {    setTimeout(() => {      alert('You clicked on: ' + count);    }, 3000);  }  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={handleAlertClick}>
        Show alert      </button>    </div>  );
}

해당 코드를 통해

• 카운터를 3으로 증가시킨다
• “Show alert”을누른다
• 타임아웃이 실행되기 전에 카운터를 5로 증가시킨다

순서로 실행을 한 후 alert 등장할 때의 값인 5가 나올지? 아니면  “Show alert” 버튼을 클릭할 당시의 값인 3이 나올지에 대한

문제를 제시했다. 일단 동작을 하기 전에 내 생각에는 버튼을 클릭할 당시의 값인 3이 나올 것 같았다 그 이유에서는 
개인적인 생각으로 useState에 setState를 사용해서 값을 변경 후에 바로 출력하게 되면 아직 변경되지 않은 값이 나오게 되는데

그런 이유에서였다..ㅎ; 

아무튼 실행을 해보니 3이 출력되었다. 헣 

'3'이 나오는 이유는 alert은 버튼을 클릭할 때의 state를 잡아두기 때문이다이며 정의된 함수는 여러 번 호출되지만(랜더링마다 한 번씩),
각각의 랜더링에서 함수 안의 count 값은 상수이자 독립적인 값(특정 랜더링 시의 상태)으로 존재하기 때문이다.

앞서 말했던 count값을 “보는 것이다"의 의미를 조금이나마? 이해할 수 있게 되었다

 

// 처음 랜더링 시
function Counter() {
  const count = 0; // useState() 로부터 리턴  // ...
  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  // ...
}

// 클릭하면 함수가 다시 호출된다
function Counter() {
  const count = 1; // useState() 로부터 리턴  // ...
  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  // ...
}

// 또 한번 클릭하면, 다시 함수가 호출된다
function Counter() {
  const count = 2; // useState() 로부터 리턴  // ...
  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  // ...
}

이런 식으로 렌더링부터 버튼을 클릭할 때마다 고유한 count값들이 존재하는 것!