전역 상태 관리 redux 쓰게된 이유

kdy·2023년 1월 22일
0
post-thumbnail

리덕스같은 상태관리 도구를 왜 써야할까요?

c 언어에서 define처럼 전역 함수 처럼 사용할수있어서?

반은 맞습니다.

그럼 js나 react에서 처음부터 전역 변수를 지원 해주면 되는거 아녀요?

안됩니다. 웹페이지는 지역변수가 어마어마하게 많기때문에 이름이 겹칠확률이 높습니다. 왜냐하면, 많은 웹페이지는 내가 모르는 누군가 가 작성한 코드 들 또한 참고하기때문에 전역적인 변수명을 쉽게 사용했다간 메모리 참조 오류가 날것입니다. 과거 존재 했던 var로 선언하던 것들이 그 예시입니다.

또한 하나의 웹페이지는 사실 하나의 js코드로 작동합니다.

우리가 평소 사용하는 js들은 스코프의 기준에 맞춰 특정 영역 안에서만 작동하기때문에 잊기 쉽상입니다.

그리고 es문법이 업데이트 되면서 var 쓰면 컴파일 오류날수도있음.

그럼 전역변수 쓰지도 못하고, 지정도못하면 어떻게 페이지들, 컴포넌트
마다 값을 주고 받죠 ?

아래 코드처럼 arguments에 이벤트고 함수고 변수고 다때려박으면 되겠네요? 그럼 전달되네??

fucntion 2ndComponent (arguments1:function, arguments2:string,a rguments3:eventHandler)
{
	... 
    return(...)
}


제가 실제로 그렇게 했는대요.

지금 사진의 상품들은 각각

import된 컴포넌트(상품정보,setstate).map((jsx)=>return jsx)

상태로 동적 렌더링을 통해 페이지에 렌더링 되고있습니다.

이렇게 되는대요. 여기서 상품정보를 업데이트 시켜주는 setState 또한 내려주고있습니다. 근대 이렇게 코드를 짜면 상 하위 컴포넌트를 동시변경 하기 위해선 말도안되는 짓을 해야합니다.

위 사진대로 코드를 짜면 setState(상바구니 페이지에서 내려준 함수)가 현재 setState가 발생한 상품 정보 컴포넌트를 업데이트를 시켜주지만, 상위 컴포넌트인 장바구니 페이지를 업데이트 시켜주지 못합니다.

setState로 촉발된 re-rendering은 호출된 곳의 스코프를 기준으로 업데이트 하기 때문입니다.
만약 해당 그걸 가능케 하려면 event Function 또한 상위 컴포넌트에서 작성 후 props로 내려보내야합니다.

즉 저는 이대로 코드를 계속 짜려면 event함수또한 상위 컴포넌트에서 인자값으로 내려보내줘야합니다. 이런식으로 매번 하나하나 인자값을 다 내려주는건 뭔가 이상해 찾아본 결과 제가 겪은 경험은 props drilling 이라는걸 알았습니다.

props drilling 현상을 겪으면서 왜 전역 상태관리 기능이 생겨났는지 알수있었습니다.

props drilling 설명 링크


그래서 바꾸고 개선 시킨게 이런 코드입니다.

리듀서만들고 만든 리듀서를 store에 상태랑 같이 등록하면

사진 우측이 업데이트 된 코드
이렇게 바꿀수있습니다.

: 상태 업데이트 변수(재 렌더링시 변수를 업데이트) 만약 input값을 주고싶으면 eventHandler로 바꾸면된다.

이제 잘 작동됨

그럼 이전의 장바구니는 어떻게 담음?

여태까진 쿠키값에 담았습니다

결론:

profile
빠르고 정확해야 혈압이 안오른다

0개의 댓글