[리액트] side Effect

💡 side Effect는 부작용이란 뜻으로 부수적인 효과라는 의미이다. (주된 효과 이외의 효과)

프로그래밍에서의 부작용

• 함수에서 함수 외부 값을 읽어오거나 변경하는 행위
• 코드가 의도한 효과 외의 효과
• 함수의 본질적 역할은 input을 받아 output을 산출한다. input ⇒ =output

side Effect X (순수함수)

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

위의 함수는 x를 받아 1을 더하는 함수이다.
주된 행위 이외의 어떤 행위도 하지 않아 side Effect가 없다고 할 수 있다.
이러한 함수를 순수함수라고 한다.

side Effect O

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

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

위의 함수들은 side Effect가 존재한다.

위 함수는 함수 내부값이 아닌 외부값인 num을 가져왔고, 함수 외부 값을 가져오고 변형 시켰기 때문이다.

외부 값이 외부 변수를 뜻하는 것은 아니다.

dom을 조작하고 패널의 문자를 출력하는 행위들은 함수 외부의 Dom과 콘솔을 변경 시키는 것이기 때문에
side Effect가 있는 것이다.

side Effect는 지양해야 할까?

const sum = (x) => x + 1; // 1번
const sum = (x) => x + num; // 2번

1번 코드를 보면 인자를 넣었을 때 1이 더해져 나올꺼라는 것은 예상이 가능하다.
하지만 2번 코드처럼 인자를 넣었을 때 변수 값을 더하면 어떤 값이 나올지는 예상하기 힘들다.
이처럼 side Effect를 사용하면 결과 값을 예상하기 힘들고 유지보수가 어렵다.

• 그렇다고 외부 값을 읽어오거나 변경하는 것을 포기할 수는 없다.
• 프로그램이 외부로 아무 값도 출력하지 않으면 아무 의미가 없는 것이다.
• 데이터를 저장하고 읽어는 행위를 하지 않는다면 프로그래밍을 할 수 없다.
• 그래서 side Effect를 최소한으로 사용하며 통제할 수 있게 해서 유지보수가 되도록 만들어야 한다.

react의 side Effect

함수 컴포넌트의 side Effect

리액트의 함수 컴포넌트 에서의 side Effect는 state와 props를 이용해서 jsx를 만드는 행위 이외의 모든 행위이다.(state, props) ⇒ jsx

가장 많이 사용하는 side Effect

• date fetching
  BE api 데이터를 가져오는 것은 외부에서 데이터를 가져오기에 side Effect이다.

• dom 접근/ 조작
  리액트에선 dom 조작을 권장하지 않지만 사용해야 하는 경우도 있다
  dom을 조작하는 것은 외부 값을 읽어오고 변경하는 것이기에 side Effect이다.

• 구독
  프로그래밍에서 구독은 관찰 대상이 변화하면 행동하는 것이다.
  따라서 외부 값을 관찰하다 변화하면 동작하기에 구독 또한 side Effect이다.
  가장 많이 쓰이는 구독은 시간을 구독하는 것이다.

마치며

side Effect를 당연히 사용해도 된다고 생각했지만 side Effect를 사용하면 값을 예상할 수 없고 유지보수 측면에 어려움이 있다는 것을 알게되었다.
따라서 정말 필요한 상황이 아니라면 최대한 sideEffect를 지양해야 한다.