리액트 2. props , 불변성, 불변성을 지켜야 하는 이유

Props Drilling 이란 무엇인가요?

리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정을 의미합니다. 예를 들어 우리가 App.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터가 변경되었을 때 일일히 고쳐야하는 불편함이 있습니다. 이를 해결하기 위해

전역 상태 관리 라이브러리인 Redux, Mobx를 이용하여 해당 값이 필요한 컴포넌트에게 직접 불러서 사용하는 해결하는 방안이 있습니다.

 

이렇게 상위 컴포넌트에서 또 하위 컴포넌트로, 또 하위, 또 하위로.. 컴포넌트가 드릴처럼 밑으로 뚫고 내려간다. 이래서 생긴 props drilling이란 단어입니다. 결과를 보면 다음과 같이 잘 출력될겁니다!

정도 props로 넘겨받는 정도라면 상관이 없겠지만.. 과연 이게 네 번, 다 섯번 중첩이 된다면 우리는? 이건 뭐 user 하나 찾자고 user를 가지고 있는 컴포넌트의 아버지 할아버지 고조할아버지까지 찾아봐야할 지경이죠.. 이러한 문제를 해결하기 위해 탄생한것들이..?! 🥳

 

State Management" 상태관리 생겼다 전역한 Redux, Apollo client, Context API, Recoil 을 말합니다.

상태관리할 '동적인 information data'  들을 어떠한 공간에 모아 그 곳에서 모든 정보를 관리하고 컴포넌트들에게 내려주는 것이죠! 이 것을 '스토어' 라고 명칭할겁니다.

거대한 규모의 프로젝트가 아닌 경우, 이러한 상태관리는 오히려 더 귀찮아지는 작업 이겠지만, 최상위 컴포넌트의 크기가 커지면 커질수록, 하위 컴포넌트가 늘어나면 늘어날수록 위에 설명한 이유 때문에 우리는 상태관리 라이브러리가 필요한 것입니다!

---

는 개인적으로 리덕스의 작동 방식이 너무 복잡하다고 느껴서 Recoil을 상태관리에 이용해볼려고 하고 있습니다!

대형 프로젝트에서 Redux는 그 힘을 충분히 발휘할 수 있겠지만, 소규모 프로젝트와 토이 프로젝트를 할 때에는 오히려 걸리적거리더라고요! 하지만 Recoil은 react hooks와 비슷한 재질(?) 이라는 느낌이 들어서 사용하는데 어색하지도 않고 직관적이라 개인적으로 좋은 것 같습니다!

 

무엇이 문제일까?

먼저, props 전달이 3~5개 정도 컴포넌트라면 Props Drilling은 문제가 되지 않는다. 하지만 Props 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 어떻게 될까? 코드를 읽을 때 해당 props를 추적하기가 힘들어진다.

Props 해결 방법

권장하는 방법은 합성

→ Children

usecontext, recoil,

1. 전역 상태관리 라이브러리 사용

redux, Mobx, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있다.

2. Children을 적극적으로 사용

Children이란?

공식문서에서는 아래와 같이 설명하고 있다.

props.children의 필요성

props.children은 주로 자식 컴포넌트 또는 html 엘리먼트가 어떻게 구성되어있는지 모르는데 화면에 표시해야 하는 경우 사용한다.

부모→ 자식을 주고 그 사이에 자식을

예를 들어 < Category > ~ < /Category >안에 < li >가 몇 개 작성될지 모른다면 효율적으로 사용할 수 있게 되는 것이다.

 

자바스크립트 불변성이란

불변성(Immutability)란 말그대로 변하지 않는 것을 의미한다.

→ 불변성 자바

객체가 생성이 된이후 그 상태를 변경할수 없습니다.

 

여기서 상태를 변경할 수 있는 것과 값을 재할당하는 것은 다르다는 것을 알아야합니다.

자바스크립트에서는 불변성을 유지하는 값과, 그렇지 않는 값들이 나누어져 있습니다.

 

원시타입(불변)으로는 Boolean,  Number, String, null, undefined, Symbol 과 같은 타입들은 불변성을 유지하는 타입들이고

(이 값들은 메모리 영역 안에서 변경이 불가능하고  변수에 할당할 때 완전히 새로운 값이 만들어져 재 할당이 된다)

Object 객체나 배열은 객체 타입은 변경가능한 값들입니다.

객체는 새로운 값이 만들어지지 않고 직접적으로 변경이 가능합니다.

불변성 개념은 특별히 자바스크립트 언어에 한정되는 것이 아니고, 다른 언어에서도 존재하는 개념이다. 얕은 복사(shallow copy)와 깊은복사(deep copy)의 개념까지 어느정도 이어지기 때문에 꼭 숙지하는 것이 좋다.

변성을 지키는 것이 왜 중요한가요?

우리는 개발자로서 유지보수가 가능하고 가독성이 좋은 코드를 작성해야한다.불변성을 지키지 않는다면 위의 예시처럼 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고, 이는 곧 예기치 못한 side effects나 버그로 이어지게 만든다.

불변성을 지켜 명시적으로 작성된 코드는 다른 개발자가 코드를 보았을 때도

내가 모르는 어딘가에서 데이터가 변화했을거야! 라는 불필요한 의심없이 코드를 읽는 그대로 흐름을 따라가면서 이해할 수 있도록 돕는다.

애초에 불변성을 지켜야 한다는 것은 리액트가 만들어낸 새로운 컨셉이 아니라 불변성이라는 개념을 지켜가면서 state와 props를 이용할 수 있도록 하는 아이디어를 리액트에 녹여낸 것이다.

let 변수는 어떠한 값을 가르키다가 다시 다른 값의 주소를 재할당이 가능합니다.

하지만 const는 재선언 및 재할당이 불가능하다.