-
React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나감 -> 여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작동함
-
React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생
-> 이는 React의 입장에서는 전부 Side Effect
-> React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공 -
React 컴포넌트에서의 Side Effect
1) 타이머 사용 (setTimeout)
2) 데이터 가져오기 (fetch API, localStorage) -
React에서 Ajax 요청을 보낼 때는 Effect Hook을 사용한다 -> 만약 훅을 사용하지 않고 네트워크 요청을 하면 그 동안에 페이지가 멈추거나 깜빡일 수 있다
-
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 함
-> React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생 -
순수 함수에는 네트워크 요청과 같은 Side Effect가 없음
-> 순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장
-> '순수 함수' = '예측 가능한 함수' -
React Hook은 최상위에서만 호출
-
조건문, 반복문 안에서는 사용하지 않는다
