본문 바로가기

JavaScript/리엑트

useEffect의 dependency array

useEffect는 리엑트에서 side effect를 처리할 때 사용하는 함수입니다

쉽게말해 사이드 이펙트가 발생할꺼같은 코드는 useEffect에 넣어 처리합니다

useEffect에는 dependency array라는것이 있습니다

useEffect는 1번째 인자로 실행시킬 함수가 들어가고 2번째 인자로 배열이 들어가는데 이 배열을  dependency array라고 합니다

2번쨰 인자를 생략하면 렌더링 될때마다 1번째 인자로 준 함수가 실행되고

2번째 인자를 넣으면 2번째 인자값이 변할때마다 실행됩니다

처음 1번만 실행하고 싶다면 빈 배열을 넣으면 됩니다

사용 예시로는 ajax 요청, DOM reference 참조 및 변경을 할때 side effect가 발생하는데 이런 처리를 할때 useEffect로 처리를 해야됩니다

useEffect를 사용하는 이유는 코드 전체적인 가독성이 좋아집니다

useEffect함수의 의미 자체가 나는 side effect를 처리한다는 의미가 있어 여기서 side effect가 발생하는구나 라고 예측하기 쉽기 때문에 사용합니다 

 

 

'JavaScript > 리엑트' 카테고리의 다른 글

React 컴포넌트의 key 속성  (0) 2022.10.19
React Props, State  (0) 2022.10.19