일반적인 의미에서 <사이트 이펙트 === 부작용>이라고 다룬다.
또는 의도하지 않은 효과 or 부수 효과라고 불리기도 한다.
이번에 공부해볼 useEffect는 react에서 사이드 이팩트를 다루는 hook인데 의도하지 않은 효과보다는 부수 효과에 가깝다.
그럼 useEffect에 대해서 알아보자~! 😎
useEffect
- 리엑트에서 변경이나 효과가 일어날 때 효과를 다른곳으로 전파 or 부수적인 효과를 내주기 위한 hook이다.
- ex) 이 값이 변경되면 이런 이벤트가 발생했으면 좋겠어.
화면에 처음그려질때 최초 한번 데이터를 가져오고 싶어
useEffect의 특성을 알아보기 위한 간단한 예제를 한 번 만들어 보자.
ex) 값을 변경하면 변경하는 값이 저장되게 하기
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [text, setText] = React.useState(() => {
console.log("init");
return window.localStorage.getItem("text");
});
console.log("render");
window.localStorage.setItem("text", text);
const handleChange = (e) => {
console.log("handle");
setText(e.target.value);
};
return (
<>
<input onChange={handleChange} value={text} />
<p>{`saved text...${text ? text : ""}`}</p>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>console.log('render') 바뀔때마다 render를 한다. 그런데 값을 저장하기 위해서 위에처럼 localstorage에 저장하게 되면 화면에 render할때마다 계속 내장 브라우저와 io를 하게 된다.
이 문제를 해결해줄 수 있는게 useEffect이다. text의 상태가 바뀔때마다 localStorage에 저장해주는 것이다.
ex) 변경된 코드
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [text, setText] = React.useState(() => {
console.log("init");
return window.localStorage.getItem("text");
});
React.useEffect(() => {
console.log("save");
window.localStorage.setItem("text", text);
}, [text]);
console.log("render");
const handleChange = (e) => {
console.log("handle");
setText(e.target.value);
};
return (
<>
<input onChange={handleChange} value={text} />
<p>{`saved text...${text ? text : ""}`}</p>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>부가적으로 사용한 코드 tip
- react는 새로고침하면 dom을 다시 그리기 때문에 저장된값이 보이지 않는다.
그때 사용할 수 있는 것이 내장 브라우저 저장소(localStorage, sessionStroage, cookie)이다.- useState를 초기값을 세팅할 시 윈도우의 localStorage에 도달했다가 꺼내와야하기 때문에 딜레이가 있을 수 있다. 그래서 사용할수 있는 것이
처음 그려질 때 useState의 초기값으로 함수를 넣는 것이다.
처음값을 읽어오는 시간이 길더라도 함수가 실행이 되야지만 결과물을 받아오게 할 수 있다. initial을 조금 늦게 할수 있다.
- 랜더보다도 나중에 initialize된다. render후 initialize하면
함수를 전달하고 함수의 결과물을 기초값으로 전달할 수 있다.
useEffect 사용 방법
useEffect(함수, []);
- 첫번째인자 - 함수 (어떤 조건에 따라서 실행만 되는것)
- 두번째 인자 - 배열 (dependency array,의존성 배열) 사이드 이펙트를 일으키고 싶은 대상 어떤 대상에 대하여 이 useEffect를 실행할 것인가.
useEffect의 dependency array
- dependecy array가 없으면 모든 변화에 다 반응한다.
- 빈배열이게 되면 화면을 그리는 처음에만 동작한다.
- 두번째요소 배열의 값이 바뀔때만 useEffect가 동작한다. , state가 변경될때마다 감지해서 사용.
- 어떤 변화 , 의도한 변화에 대해 부수효과를 내는것이기때문에 dependency array의 등록된 state값이 바뀌었을때 동작하는 기능을 만들기 위해서 사용하는 것이다.
끝마치면서
- 사이드 이펙트 : 부수효과(긍정적)
- useState : lazy initialize(초기값을 가지고오는데 시간이 좀 걸리거나 , 리소스 소비가 들면 함수로 만들면 initialize하는 것을 조금 딜레이 시킬 수 있다.)
- useEffect : dependency array(키워드의 변화에 따른 사이드 이펙트)
개발자