20220420_react_useEffect

React.js

 

useEffect

useEffect( function, []?)

 

주로 3가지 방식으로 사용됩니다.

useEffect(()=> {});

useEffect{()=> {}, []);

const [name,setName] = useState('kim');
useEffect(()=> {}, [name]);

첫 번째 형태

useEffect의 가장 기본 형태

렌더링 할 때 한번 그리고 Dependency가 없기 때문에 변화가 있을 때마다 발생하기 때문입니다.

두번째 형태

useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 사용합니다.

콜백 함수 뒤에 배열을 나타내는 대괄호가 있습니다. 이곳에 Dependecy를 지정합니다.

하지만 아무 변수나 값 없이 대괄호만 있다면, 이 useEffect는 렌더링 후 단 한번만 실행됩니다.

세번재 형태

useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행됩니다.

이렇게 Depencency를 지정해주면 지정된 변수의 값이 변했을 때만 실행됩니다.