brunch

매거진 코드 품질을 높이기 위한 TIL

라이킷 6 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by zwoo Sep 12. 2021

원본 배열을 유지하고 새 배열을 리턴하기

[JS TIL] immutable cloning

리액트에서는 변수의 상태값이 변경되면 렌더하는 뷰도 변경한다. 그래서 각 상태에대한 스타일링 조건을 효율적으로 분기시켜두는 것이 중요하다. 개인적으로는 스타일드 컴포넌트를 선호하지만, 현재 우리 프로젝트에서는 리액트 네이티브의 StyleSheet 를 배열로 만들어서 조건에 따라 스타일 속성을 추가하거나 교체하는 방식을 쓰고 있다.

번거로움을 줄이기 위해 최근에 스타일 속성을 변경하는 헬퍼를 만들었다.

https://gist.github.com/yeonwooz/ef18f6ff5683d434ab7c473709d8c8f8

두 함수에는 각각 두가지의 의도가 담겨있었다. 첫째, 원본배열을 받아 새 배열로 교체할 것. 둘째, 새 배열에서 스타일 속성을 변경한 후 리턴할 것. 하지만 의도한대로 동작하지 않았다. 원본배열 자체가 변경되었고, 새 배열은 원본배열을 그대로 참조하게 된 것이다. 이렇게 하면 쓸데없이 똑같은 배열 두개가 만들어져서 사실상 리턴 부분이 불필요한 라인이 되고 원본 배열의 불변성이 깨진다. 결과적으로 함수를 만든 의미가 퇴색된다.

물론, 이 경우에는 함수를 통해 리턴받은 배열을 새로 할당할 필요 없이 원본 스타일 배열 자체를 변경하는 게 오히려 더 간단하게 되었다. 하지만 다음에 또 이 부분을 놓친다면 실수가 버그로 이어질 수도 있어서 기록해두려는 것이다.

mutable cloning

https://gist.github.com/yeonwooz/15d1f59e0d75cb9ec945d9194409b816

원본배열의 불변성이 깨진 이유는 간단한데, 의도와 다른 클론 방식을 선택하는 실수를 저질렀기 때문이다. 4번째 라인처럼 할당하면 참조 복사가 이루어진다. copiedParam 이 param 의 주소값만 가리키고 있기에 두 배열이 독립적일 수 없게 되고, param 에 변화가 생기면 copiedParam 은 여전히 같은 주소값을 가리키고 있기 때문에 그 변화된 param의 모습을 값으로 갖게 된다.