useEffect

 

Hook

---

• Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동(hook)할 수 있게 해주는 함수다. 
• Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다.
• 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 동작을 effects라 하며, Effect Hook으로 조작할 수 있다.

 

 

useEffect

---

• 컴포넌트가 렌더링 될 때마다 특정 작업을 실행시키는 effect Hook.
• useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정 작업을 처리할 수 있다.
• 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서 사용가능하게 해 준다.
• 또한 함수 외부에 영향을 끼치는 Side Effect를 관리하기 위해서도 사용한다. 주로 fetch같은 외부 api에서 데이터를 받거나 이벤트를 활용해 DOM 직접 조작할 때 유용하다.

useEffect(callback,deps)

• 첫번째 인자로는 실행할 콜백함수를 받고, 두번째 인자는 deps라는 배열로 특정 값이 업데이트 될때 실행하도록 하게 만들수 있다.
• 두번째 인자가 없으면 랜더링 될 때마다 실행되며, [ ](빈 배열)을 넣으면 처음 랜더링 될 때만 실행된다.
• []안에는 여러  변수나 states를 넣을 수 있으며, 배열 안에 요소가 변경될 때마다 실행된다.
• useEffect는 조건문,반복문 안에서는 사용불가하며, 사용하려면 콜백함수 안에서  조건문,반복문를 작성해야한다.
• return 뒤에 오는 함수를 clean up 함수라 하며 deps가 빈 배열이거나 없으면 컴포넌트가 언마운트 될때, 즉, 삭제될 때 실행하게 할 수 있다.
• 만약 deps에 요소가 있다면 해당 요소가 업데이트 되기 직전에 실행 하는 함수를 작성할 수 있다.

useEffect(() => {
console.log("hi");
},[]);// 처음 랜더링 될때 hi를 콘솔 창에 출력


useEffect(() => {
console.log("change");
},[num]);//num이라는 변수가 변화 할 때마다 실행.

useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);
//filter라는 검색조건이 바꿀때마다 api를 호출


useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });//mount될 때,친구의 접속 상태를 구독하고 컴포넌트가 unmount될 때 리액트는 ChatAPI에서 구독을 해지한다.