순수함수

• 함수에 전달하는 argument에 따라서만 함수의 return이 달라지는 함수를 뜻함.
• 전달하는 argument자체를 변화시키지 않음.
• 따라서 결과값을 예측이 가능한 함수라고도 불림.

Side effect

• 함수내에서 어떤 구현이 함수 외부에 영향을 끼치는경우 해당함수는 side effect(부작용)가 있는 함수라고 지칭한다.
• React에서는 이벤트를 활용해 DOM을 직접 조작하거나 Fetch를 이용해 API를 받아오면 side effect가 발생했다고 본다.
  • fetch로 서버에 요청을 보내어 서버의 데이터에 자료가 바뀐다면 서버의 데이터에 side effect가 발생한다고 볼수있고 이는 순수함수라고 볼수없다.
• 반대의 의미로 활용되는 pure function(순수함수)이 있다.

let foo = 'hello';
function bar() {
  foo = 'world';
}
bar(); // bar는 Side Effect를 발생시킵니다!

• React 컴포넌트는 props가 입력으로, JSX element가 출력으로 나가므로 순수함수라고 볼수 있다.
• React와 상관없는 API (localstorage, fetch, 타이머 등)를 사용하는 경우는 React입장에선 모두 side effect이다. React에서는 이러한 side effect를 handling하기 위해 Hook을 사용하고 그중 Effect hook을 사용한다.

Effect Hook

• React 컴포넌트내에서 side effect를 실행할 수 있게하는 Hook
• useEffect로 호출함.
• 컴포넌트가 렌더링 될때 마다 실행됨.

Effect Hook과 Side Effect와의 관계

• 컴포넌트가 렌더링될때 또는 상태 변경 함수 실행 이후 동작하는 내용들을 react에서는 side-effect라고 부른다.(컴포넌트가 렌더링될시 여러 조건문들에 의해 컴포넌트가 변경될수 있기 때문 (순수함수가 아님))
• 이 side effect를 react에서는 useEffect에서 처리하는걸 권장한다.

Hook 사용시 주의점

• 따로 포스팅

effect hook 사용

useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

• 종속성이 없기때문에 해당 컴포넌트가 랜더링 될때마다 실행.

effect hook 성능 최적화

dependency array

• useEffect함수가 실행될 때 dependency array가 전달되고 이 배열에 의해 useEffect의 동작여부가 달라진다.

1. (재)랜더링
2. useEffect함수 호출 (파라미터로 콜백함수, dependency array 전달)
3. 이전 dependency array와 비교
   3-1. 3에서 다른점이 발견 될 시 콜백 호출

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // props.friend.id가 바뀔 때만 재구독합니다.

//빈 배열을 준다면 최초1 회만 실행한다.

• hook은 컴포넌트 외부에서 배열로 저장이 된다. 따라서 [props.friend.id,종속성2, 종속성3]의 값이 외부에 저장이 되어있고 재 랜더링이 되었을 때 이값과 현재 값을 비교해서 다르다면 effect를 실행한다.
• 배열중 하나라도 값이 달라지면 실행한다.
• 종속성 배열에 값을 주어지지 않는다면 예상한대로 1회만 실행된다.