React에는 대표적인 Hook이 두가지가 있다
useState와 useEffect가 있으며 나머지는 개별적으로 따로 만들어서 Hook을 사용할 수 있다고는 한다ㅏ.
하지만 일단 기본적으로 React에 내장된 Hook인 useState와 useEffect에 대해서 알아봐야한다.
그 중에서도 useEffect에 대해서 먼저 알아보면서 정리를 해보려고 한다.
useEffect가 뭘까?
useEffect를 알아보면서 되게 많은 정보들이 있었다, useEffect를 사용하면 컴포넌트에서도
side effect를 사용할 수 있다고 하는데 일단 문제는 컴포넌트에서 사용하는걸 떠나서
side effect가 무슨소리인지를 도저히 모르겠어서 더 찾다가 찾다가 그나마 처음보는 사람도
이해하기 쉬운 글이 있어서 정리를 해보려고 한다.
일단, 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.
근데 useEffect는 애초에 렌더링이 한 번 끝나면 무조건 실행이 되는 Hook이다.
useEffect Hook의 경우에는 몇가지 조건에 의해 작동이 된다고 하는데 그 부분을 알아야한다.
일단, 위에서 말한 것 처럼 페이지 렌더링이 한 번 끝나면 일단 무조건 실행이 된다.
두번째는 useEffect에 배열로 지정한 useState 값이 변경이 일어나면 실행이 된다.
이 두가지를 정리하자면 useEffect는 페이지 렌더링이 일어나거나, 변수의 값이나 오브젝트가
변경이 되면 그것을 인지해서 업데이트를 해주는 함수라고 생각하면 좋을 것 같다.useEffect는 콜백 함수를 부르고 렌더링 혹은 값,오브젝트의 변경에 따라서 어떠한 함수나여러개의 함수들을 동작을 시킬 수 있다고 한다.
useEffect (() => {});
useEffect (() => {},[]);
const [name,setName] = useState(0);
useEffect (() => {},[name]);
위의 코드를 보면서 useEffect를 사용하는 방법 3가지를 정리를 해보려고 한다.
우선 첫 번째는 useEffect의 가장 기본적인 형태이지만 거의 사용하지는 않는다.
왜냐하면 Dependency가 없기 때문에 렌더링 할 때 한 번 그리고 어떤 것이든 변화가 있다면
무조건적으로 useEffect가 실행이 되어서 불필요한 실행이 너무 많아지게 되어서 이다.
두번째는 useEffect를 렌더링 한 후에 한 번만 실행을 하고 싶을 때 사용하는 방법이다.
콜백 함수 뒤에 배열을 나타내는 대괄호가 붙어 있는데 이 곳에다가 Dependency를 지정할 수 있다.
그치만 아무 변수나 값 없이 대괄호만 있다고 한다면 이 useEffect는 렌더링 후에 한 번만 실행이 되고그 이후에는 다시는 실행이 되지 않는다.
세번째는 useEffect를 렌더링 후에 한 번 그리고 배열 안 변수의 값이 변경이 될 때 실행되는 코드이다.이렇게 Dependency를 지정해줘서 지정된 변수의 값이 변했을 때만 실행이 된다.(name을 지정해줬으니 name의 값이 변경이 되면 실행이 된다고 보면 된다.)
다시 정리하자면, useEffect는 어떤 값의 변화를 감지하면 실행되어 특정 함수나 작업을 실행하는 Hook 이다.
useEffect는 콜백 함수를 가지고 Dependency는 있을 수도 없을 수도 있다.
useEffect는 렌더링이 된 후 무조건 한 번 실행된다.
1. Dependency가 없다으면 useEffect는 어떤 useState의 변수든 값이 변경된 것을 인지하고 실행한다.
2. 대괄호만 사용하면 무조건 단 한 번만 실행이되고 그 후에는 실행이 되지 않는다.
3. 대괄호 안에 지정된 변수 혹은 오브젝트가 변하지 않는다면 useEffect는 실행이 되지 않는다.
댓글