[TIL] 2023-0117 : 순수 함수 / 4주차 과제 진행과정 -1 / 캡처링, 버블링

🐈오늘 공부한 것

✔️순수 함수란?

알고 있는 것

순수 함수란 사이드 이펙트를 일으키지 않는 함수를 의미한다. 즉 동일한 input 에 대해 동일한 output을 리턴한다. 사이드 이펙트란 부수 효과라고도 불리며 함수가 함수 외부의 상태를 변경하는 것을 의미한다. 순수 함수를 지향해야 하는 이유는 사이드 이펙트가 일어났을 때 어떤 동작이 일어날지 예측할 수 없기 때문이다. 그래서 리액트의 컴포넌트도 순수 함수의 형태를 유지한다.

 

리액트의 컴포넌트는 왜 순수 함수처럼 동작해야 하는가?

리액트의 컴포넌트가 순수 함수처럼 동작해야한다는 의미는, 컴포넌트로 주입된 props 를 읽기전용으로 다룬다는 뜻이다. 읽기 전용으로 다룬다는 의미는 props에 직접 접근해서 값을 변경하지 않고, state인 경우 setState를 통해서만 값을 변경하여 불변성을 유지하는 것이다. (공식문서 참고)

 

리액트에서 데이터의 흐름은 위에서 아래로, 단방향으로 흐른다. 이런 패턴은 데이터의 변경 흐름을 쉽게 추적할 수 있다는 이점이 있다. 만약 이러한 흐름을 무시하고 props를 어디에서나 직접 접근하여 변경한다면 어디서 어떻게 변경이 일어났는지 알기가 쉽지 않다. 따라서 리액트의 컴포넌트도 부모에게 주입받은 props 의 흐름을 지키기 위해 직접 변경하지 않는, 즉 순수 함수처럼 동작하도록 해야한다. 

 

불변성을 지켜야 하는 이유?

불변성을 지킨다는 것은 값을 직접 변경하지 않고 늘 새로운 값을 리턴한다는 의미이다. 불변성을 지킴으로써 얻을 수 있는 이점은 먼저 예기치못한 사이드이펙트를 방지할 수 있다는 점이다. 리액트에서 state를 직접 변경하지 않고 setState를 사용하는 것이 바로 불변성을 지키는 방법이다.

 

setState를 사용하여 값을 변경해야만 리액트는 데이터의 변화를 감지하고 UI 를 업데이트 할 수 있다. 리액트에서는 데이터가 변경되었음을 알기 위해 이전 값과 현재 값을 비교하는데, 이 때 메모리 주소를 참조한다. 자바스크립트의 특수성으로 참조 값을 수정해도 동일한 메모리 주소에 위치하기 때문에 다른 값인지 알 수가 없다. 따라서 데이터를 새로운 메모리에 복사해서 변경하여 두 값의 다름을 파악한다. 

 

정리

순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수를 의미하고, 그래서 사이드 이펙트를 일으키지 않는 함수를 의미합니다. 사이드 이펙트란 함수 외부의 상태를 변경하는 것으로, 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있습니다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있습니다. 

✔️4주차 과제 진행과정 -1

[Redux] redux-toolkit 폴더 구조 / 비동기처리 - createAsyncThunk 사용법

간단한 댓글 CRUD를 리덕스 비동기 상태관리를 통해 구현하는 과제이다. 리덕스 툴킷을 간단하게 사용해봤지만 비동기 처리는 제대로 다뤄보지 못했는데, 이번에 createAsyncThunk 라는 함수의 사용법과 extraReducers 의 사용법에 대해 공부할 수 있었다.

 

고민되는 부분은 slice 를 어떤 단위로 나눠야 할지? CRUD 전체 기능을 commentsSlice 에 전부 구현하려고 했는데 기능 단위가 그런 전체 단위를 의미하는건지 잘 모르겠다. 생각보다 코드가 길어지는 느낌? 리코일은 정말 전역 상태! 만 관리하는 느낌이라면 (지금까지 그렇게밖에 안써봐서 그런 것일 수도 있으나...) 리덕스는 reducer 라는 개념으로 그 상태의 동작까지 한 번에 관리되는 것 같다. 

✔️이벤트 위임, 전파 정리

[JavaScript] 이벤트 위임, 이벤트 전파, e.target & e.currentTarget 차이

최근 바닐라 자바스크립트 구현 강의를 수강하면서 배운 이벤트 위임에 대한 내용이다. 이벤트 위임은 바닐라 자바스크립트 구현에서 꽤 자주 사용되는 기법이라고 한다. 이벤트 위임이 어떻게 되는걸까 궁금해서 그 원리가 되는 이벤트 전파 그리고 평소에 궁금했던 target 과 currentTarget에 대해서 간단하게 정리해 보았다.