[React]-side effect

React의 함수 컴포넌트의 side effect

• 함수 컴포넌트에서의 input 과 output

리액트에서 렌더링이란 state 랑 props를 기반으로 UI 를 그려내는 행위 이다.
리액트에서 UI 를 컴포넌트 단위로 구성하고, 그 컴포넌트는 함수 컴포넌트를 이용해서 만들 수 있다.
(함수의 본질은 input 을 바다서 output을 출력 하는것)

리액트의 함수 컴포넌트 본질은 무엇일까?

함수 컴포넌트는 state 그리고 props를 통해서 JSX 를 만들어내는 것이 본질적인 역할이다.
즉 함수 컴포넌트의 input은 state 그리고 props 라고 할 수 있고, output은 JSX 라고 할 수 있다.
이를 식으로 표현 하면, (state, props) = > JSX

(엄밀히 말하면 리액트의 함수 컴포넌트는 인자로 props 만을 받고 state 는 인자로 받는것이 아니라 useState hook 을 통해서 꺼내오지만, 개념상으로 봤을때는 state 그리고 props 를 통해서 JSX 를 만드는 것이기 때문에 이와 같이 표현한다. )

• 함수 컴포넌트의 side effect

함수 컴포넌트의 side effect 는 state 와 props 를 통해서 JSX 를 만들어내는것 이외의 모든 행위 이다.

가장 많이 발생 시키게 되는 side effect 
1.Data Fetching
2. DOM 접근 및 조작 
3. 구독 (Subscribe) 

1. Data Fetching

• 현대 개발에서 프론트엔드는 복잡한 UI 를 구성하고 변화시키는 데에 초점을 두고 있고, 백엔드는 데이터를 저장하고 처리하고 가공하는 역할을 맡고 있다.
  이런 구조 속에서 프론트엔드가 백엔드 API 를 통해서 기존에 저장된 데이터를 가져오는 행위는 필수적으로 발생하게 된다. 하지만 이는 곧 외부 (API) 로 부터 데이터를 가져오는 것이기에 이또한 Side Effect 다 라고 표현 할 수 있다.

2. DOM 접근 및 조작

• 프론트엔드 개발자 로서 웹 개발을 하는 이상 DOM 에 접근하고 조작하는 행위는 필수적이다. 물론 React는 DOM 의 조작을 React 에서 대신 해주고 개발자는 UI 와 핵심 로직에만 신경 쓰도록 선언 적인 개발을 가능하게 해주기 때문에 DOM 에 직접 접근할 일이 많지도 않고 대부분의 상황에서 권장되지 않지만 특정 상황 (document 객체에 scroll eventListener 를 등록하는 등) 에서는 DOM 에 접근하고 직접 조작을 해야 하는 상황이 발생한다. 그러한 상황에서 DOM 을 직접 접근해서 조작한다면, 이 또한 곧 외부의 값을 읽어오고 변경하는 것이기 때문에 side effect 다 라고 표현 할 수 있다.

3. 구독 (Subscribe)

• 프로그래밍에서의 구독이란 어떤 것의 변화를 계속해서 지켜보고 변화가 발생하면 특정한 액션을 취하는 것 을 말한다.
  실생활의 예시를 보면 Youtube 에서 구독이란 단어를 많이 들어 보았을 것이다.
  Youtube 에서 우리는 구독을 함으로서 해당 유튜버의 변화를 계속해서 지켜보고 만약 새로운 영상이 올라오면 알림을 받거나, 메인 피드에 노출 시키는 액션을 발생 시킨다.
  개발에서는 구독이란 개념을 이용해서 여러가지 동작을 처리할 수 있지만, 웹 개발에서 흔히 구독하는 것은 '시간'이다. 시간을 구독 한다는 것이 와닿지 않을 수 있지만 시간은 고정돼잇지 않고 항상 변화 한다. 당장 지금도 시간은 계속 흐르고 있다. 그래서 자바스크립트는 시간을 구독 하면서 일정 시간이 지나면 특정 도작을 수행해 주는 메서드인 'setTimeout', 일정 시간마다 특정 동작을 수행해주는 'setInterval' 메서드를 제공해주고 이를 이용해서 시간의 변화에 따라 원하는 동작을 이행시킬 수 있다.
  이러한 구독 행위들 또한 외부의 값의 변화를 계속해서 관찰하고 거기에 맞춰서 동작을 하는 것이기 때문에 side effect 다 라고 표현 할 수 있다.

  정리

• 프로그래밍에서 side effect 란 함수가 함수 내부의 값 외에 '외부의 값을 읽어오거나, 수정하는 행위

• side effect 는 함수의 동작 결과를 예측하기 어렵게 만들기에 일반적으로 기피해야 하는 대상, 하지만 side effect를 하나도 발생시키지 않고 프로그래밍을 할 수는 없다.

• 프론트엔드 개발에서도 Data Fetching, DOM 접근 및 조작, 구동등의 side effect 를 발생시켜야 하는 순간이 있다.

• 프론트엔드 개발을 할 때는 이러한 side effect 를 적재적소에 사용하고, 관리하면서 예측 가능하고 유지보수 하기 용이한 프로그램을 만들어야 한다.

[side effect] 프로그래밍 관점 🔽
https://velog.io/@jhp4986/Side-Effect-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EA%B4%80%EC%A0%90