[React Hooks] useEffect

CollBack함수란?

• 이름 그대로 나중에 호출되는 함수를 말한다.
• 콜백함수라고 해서 그 자체로 특별한 선언이나 문법적 특징을 가지고 있지는 않다.
• 개발자는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달 했을 때 시스템에서 호출하는 함수이다.

useEffect를 사용할 때

useEffect는 기본적으로 collback로 인자를 받는다

useEffect형태 2가지

1. useEffect( () => { //작업.. } );
2. useEffect( () ⇒ { //작업… } , [ value ] );

① , ② : useState를 이용해서 count , name 값을 각각 1과 공백으로 설정한다.

③ : 버튼 클릭시 실행되고 count + 1 을 해준다.

④ : text의 값이 바뀌면 text의 value값을 바꾸고 span태그로 전달된다.

문제점 : 렌더링이 될 때마다 useEffect가 실행된다. 만약 무거운 작업을 하는 경우면 비효율적이다.

count가 바뀔 때만 useEffect를 쓰고 싶다면?

name이 바뀔 때마다 useEffect를 쓰고 싶다면?