Effect는 React패러다임에서 벗어날 수 있는 탈출구이다.
Effect를 사용하면 React를 벗어나
컴포넌트를 React가 아닌 위젯, 네트워크, 또는 브라우저 DOM과 같은 외부 시스템과 동기화 할 수 있다.
외부 시스템이 관여하지 않는 경우
(예를 들어 일부 props 또는 state가 변경될 때 컴포넌트의 state를 업데이트하려는경우),
Effect가 필요하지 않는다.
불필요한 Effect를 제거하면 코드를 좀 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 에러 발생 가능성이 줄어든다.
불필요한 Effect를 제거하는 방법
Effect가 필요하지 않은 두 가지 경우
- 👉 데이터를 변환하는 경우
ex) 리스트를 표시하기 전에 필터링하고 싶을 때,
리스트가 변경될 때 state변수를 업데이트하는 경우 Effect는 불필요하다.
Effect를 사용하여 필터링 작업을 한다면?
1. React는 먼저 컴포넌트 함수를 호출하여 화면에 표시할 내용을 계산
2. DOM에 변경 사항 적용
3. Effect가 실행되어 필터링
만약 Effect에서 다시 상태를 업데이트 한다면, React는 다시 컴포넌트 함수를 호출하게 되어
전체 프로세스가 반복되어 불필요한 렌더링이 발생하게 된다.
[결론]
불필요한 렌더링 패스를 피하려면, 컴포넌트의 최상위 레벨에서 모든 데이터를 변환해야한다.
이렇게 하면 상태나 props가 변경될 때마다 해당 코드가 자동으로 실행되어, React가 최적의 방식으로 렌더링을 수행할 수 있고 불필요한 렌더링을 피할 수 있다.
- 👉 사용자 이벤트를 처리하는 경우
사용자가 제품을 구매할 때 POST요청을 전송하고 알림을 표시하고 싶을 때,
구매 버튼 클릭 이벤트 핸들러에서는 정확히 어떤 일이 일어났는지 알 수 있다.
하지만 Effect는 렌더링이 완료된 후에 실행되기 때문에, 사용자 이벤트가 발생한 즉시 반응하기는 적합하지 않다.
[결론]
따라서 사용자 이벤트는 이벤트 핸들러 안에서 직접 처리하는 것이 가장 좋은 방법이다.
이렇게 하면 사용자가 원하는 행동에 즉시 반응할 수 있고 사용자 경험을 향상시킬 수 있다.
Effect는 일반적으로 컴포넌트의 렌더링 이후에 필요한 부수 효과를 처리하는 데 사용되므로, 사용자 이벤트와는 다르게 다루어야한다.
자 Effect의 필요성과 역할에 대해 알아보겠다.
-
Effect는 컴포넌트가 렌더링된 후에 특정 작업을 수행하는데 사용
이 작업에는 데이터 fetching, 외부 시스템과의 동기화 등이 포함된다. -
외부 시스템과의 동기화
외부시스템이란, 예를 들어 jQuery위젯이나 API서버 같은 React외부의 시스템을 말한다.
React의 상태와 외부 시스템의 상태를 동기화해야 할 때 Effect를 사용한다.
예를들어 jQuery위젯의 상태가 React이 상태와 일치하도록 유지하려면 Effect를 설정해야한다.
Effecdt안엥서 외부 시스템의 상태를 React의 상태로 업데이트하거나, 반대로 React의 상태가 변경될 때 외부 시스템을 업데이트할 수 있다. -
데이터 가져오기
Effect는 API에서 데이터를 가져오는데도 사용된다.
예를 들어 사용자가 검색어를 입력할 때마다 해당 검색어에 맞는 결과를 API에서 가져와야할 경우
Effect를 사용하여 이작업을 수행한다.
사용자가 검색어를 입력하면 Effect가 실행되어 API에 요청을 보내고, 그 결과를 React의 상태에 저장한다.
[결론]
외부 시스템과 동기화하거나 데이터를 가져오는 작업에는 Effect가 반드시 필요하다
하지만 모던 프레임워크와 라이브러리를 활용하면 이러한 작업을 더 효울적으로 수행할 수 있는 방법이 있다. ex) React Query
여튼 Effect를 사용해야하는 상황과 그 사용방법을 이해하면, React애플리케이션의 성능과 유지보수성을 높일 수 있다.
자 이제 일반적이고 구체적인 예들을 실습을 통해 익숙해져보자
Props 또는 state에 따라 state 업데이트하기
firstName LastName 두개의 state변수가 있다고 가정
두 변수를 연결하여 fullName을 계산
또한 firstName LastName 의 값이 변경될 때마다 fullName 업데이트
😒 Effect를 사용한 경우
이러한 코드의 문제점
1. 굳이 fullName을 따로 관리할 필요 없음 firstName LastName 두개로 충분히 가능
2. 불필요한 Effect
useEffect를 사용하여 firstName과 lastName이 변경될 떄마다 fullName이 업데이트된다.
하지만 이렇게되면 React는 컴포넌트를 렌더링한 후에 Effect가 실행되어 fullName을 업데이트한다.
코드 리팩토링이라고 하기엔 소소하지만.....
코드 리팩토링 결과
// 렌더링 중에 계산되는 값
오늘은 여기까지 작성하고 이후 다른 effect가 필요없는 사례에 대해 더 추가로 작성해보겠다.
