React의 꼬-ㅊ 이라는 useEffect를 배웠다..
일단...이론은 알겠다.. 알겠는데...
흠.. 일단 내가 배운대로 정리를 해보겠다.
먼저 side Effect다.
일단 학습목표는..
- React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다.
- useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다.
- useEffect hook을 활용해 원하는 타이밍에 Side Effect를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다.
Side Effect 란?
: 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다.
: 함수의 주된 목적은 Input을 받아서 output을 산출하는 것 이므로 (input=> output)
함수의 부작용 이란 함수의 목적인 Input을 받아서 output을 산출하는 것 이외의 모든 행위를 의미
: 이를테면, 외부의 상태를 변경시키는것
ex) 함수 내에서 console.log를 찍는것
: 그리고, 외부의 값을 읽어오는 행위이다.
ex) 예시
let num;
const sum=(x) => {
num = x+1;
}
이 함수는 side effect를 가지고있다.
x라는 input을 받아서 num을 x+1 로 변경하고 있으며,
이때, 함수 내부의 값이 아닌 외부의 값인 "num"을 읽어오고 변형시키기 때문이다.
ex) 또다른 예시
const printNum = (x) => {
console.log(x);
};
const changeTitle = (newTitle)=> {
const title=document.getElementById("title");
title.innerText=newTitle;
}
흔히 외부값이라고 하면 외부에 있는 변수들만 생각할 수 있는데,
이처럼 DOM을 조작하고, 콘솔 패널에 문자를 출력하는 행위 또한 함수 외부에 있는 DOM과 console 상태를 변경시키는 것이기에 side Effect를 가지는 함수이다.
우리는 프로그래밍에서 side Effect를 지양해야할까?
side effect가 있는 함수는 바깥과의 종속적인 관계를 가지기 때문에, 바깥에서 변경이 있는 경우에 안에서는 모를수도있기 때문에 해당 하는함수를 이용하는것은 유지보수를 힘들게 한다.
= 이 말은 즉, 동작 결과를 예측하기 힘든 상황이 올 수 있기 때문에 사용을 지양해야 하지만, 무조건 안 쓸수는 없기 때문에
개발자들은 이러한 문제를 최소화하면서 프로그램을 설계하되, 반드시 통제를 할 수 있어야 한다.
React에서의 Side Effect
React에서 렌더링이란 state, props를 기반으로 UI를 그려내는 행위를 말한다.
이 UI는 컴포넌트 단위로 구성되며,
이 컴포넌트들은 함수컴포넌트를 이용해 만들 수 있는데,
이 함수 컴포넌트는 state, props 를 통해 JSX를 만들어내는것이 본질적인 역할이다.
즉, 함수 컴포넌트의 input은 state와 props이며 output은 JSX라고 표현할 수 있다. (state, props)=> JSX
그래서 이 함수 컴포넌트의 Side Effect는 위 역할을 제외한 모든 행위를 말한다..
그 중에서도 가장 많이 발생되는 Side Effect를 몇개 간추려면 아래와 같다.
1. Data Fetching (가장 많은 비율로 사용함)
: 다른쪽 서버(백엔드)에서 데이터를 가져오는 것이기 때문에 side effect이다.
2.DOM 접근 및 조작
: getElementbyId, quarySelector 등 외부값(DOM)을 읽어오고 변경하기 때문에 side effect다.
3.구독
: 프로그래밍에서 구독이란? 어떤것을 계속 관찰하다가 변화가 발생하면 특정한 액션을 취하는 것이다.
: setInterval , setTimeout
-setTimeout : 시간을 구독하면서 시간이 지나면 동작을 수행한다.
-setInterval: 일정시간마다 특정동작을 수행해줄때 쓰인다.
이또한, 외부의 값의 변화를 계속해서 관찰하고 맞춰서 동작을 하는 것이기에 side effect이다.
side effect는 함수의 동작안에서 함수의 동작을 예측할수 없기 때문에 지양해 주어야 하나,
위에 행동들을 어쩔수 없이 이용할때 side effect를 발생시켜야하는데,
개발을 하면서 통제가 가능하게 하는 hook인 useEffect를 이용해야한다.
프론트앤드 개발자는
Data fetching, 구독 등의 side effect는 매우 조심스럽게 다뤄야한다고 한다👊
그래서 언제 적절히 발생시켜야하는지 잘 알아야 하니.. useEffect를 한번 봐보자.