React | UseEffect() 를 쓰는 이유

state, props 를 활용해 원하는 UI 화면을 렌더링할 수 있지만
원하는 화면을 완전히 구현하기에 부족함이 있다.
 

📌useEffect 가 필요한 이유는 ?

화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고,
state가 바뀔 때마다 함수를 실행시키거나 이벤트 리스너를 등록하고 해제하는 등 동작을 해야되기 때문이다.
useEffect를 쓰면 원하는 타이밍에 Side Effect를 일으킬 수 있다.
 
 

📌그럼 Side Effect는 뭘까?

부작용이라는 뜻을 갖고 있지만 좀 더 풀어 말하면 부수적인 효과라고 할 수 있다.
코드에서 주요한 효과에 따라서 발생하는 추가적인 효과라고 한다.
함수에서 자주 사용되는데 Input 을 받아 Output 을 산출하는 것 이외의 모든 동작을 말한다.
 
 
순수 함수 : side effect 가 없는 함수
인풋을 받아 아웃풋을 내는 행위 외의 다른 행위 없음

const sum = (x) => {
  return x + 1;
};

 
 
side Effect 가 있는 함수 : 함수 내부 값이 아닌 외부 값도 읽어올 때

const num = 1;

const sum = (x) => {
  return x + num;
};

 
외부의 변수뿐만이 아니라
DOM을 조작하고, console패널로 값을 출력하는 것도
함수 외부의 값을 변경하기 때문에 side effect가 있는 함수가 된다.

const printNum = (x) => {
  console.log(x);
};

const changeTitle = (newTitle) => {
  const title = document.getElementById("title");

  title.innerText = newTitle;

 
 
side effect는 함수 동작의 결과를 예측하기 어려워 유지보수도 어려워지기 때문에 기피해야 한다.
하지만 데이터를 저장해두고 저장해둔 값을 읽어오는 행위는 필요하고
어떤 값도 외부로 출력하지 않는 상황을 배제할 수 없다.

✅side effect는 피할 수 없고 useEffect로 컨트롤할 수 있도록 만들어 유지보수에 악영향을 주지 않도록 해야 한다.

 
 
 

📌React에서 Side Effect는?

리엑트에서 렌더링은 state, props 를 기반으로 UI를 그려내는 행위로 UI는 함수 컴포넌트를 이용해 구성할 수 있다.
함수 컴포넌트는 state, props 를 통해 JSX를 만들어내는 것이 본질적인 역할이지만, 그 외의 side effect가 발생한다.
 

✅ side effect가 있는 경우

 
1. Data Fetching
프론트엔드가 백엔드 API를 통해 필요한 데이터를 가져오는 행위는 필수적인 행위이다.
근데 이것도 외부에서 데이터를 가져오기 때문에 side effect 다.
*FE에서 가장 많이 쓰이는 side effect 다.
 
2. DOM에 접근 및 조작
react가 DOM 조작을 처리해주어 개발자가 직접 DOM에 접근할 일이 많지 않지만, 특정 상황에서는 직접 DOM을 조작할 수도 있다.
 
3. 구독(Subscribe)
프로그래밍에서 구독은 어떤 것을 계속 관찰하다가 변화가 발생하면 특정한 액션을 취하는 것이다.
보편적으로, 시간을 구독한다.
-setTimeout : 시간을 구독하면서 특정한 시간이 지나면 동작을 수행해준다.
-setInterval : 일정 시간마다 특정 동작을 수행해준다.
외부의 값의 변화를 관찰하고 맞춰 동작을 하기에 side effect