2/23 일일정리 상태관리 실습

React 상태관리

프론트엔드에서의 상태란 '동적으로 표현되는 데이터'를 의미한다. 웹페이지가 커질수록 관리해야하는 수많은 상태들이 생겨나는데, 하나의 상태가 하나의 컴포넌트에서만 사용되는 것이 아니라 여러개의 컴포넌트에서 사용되는 경우도 있다. 이럴 때는 여러 컴포넌트의 공통 부모 컴포넌트에 상태를 선언하여 사용한다.

 

그런데 이렇게 상태를 직접 쓰는 곳이 아니라 다른곳에 선언하고 프로젝트 규모가 커지다 보니 상태가 어디에 있고 누가 쓰는지 직관적으로 알기 힘든 경우가 생긴다. 또한 부모 컴포넌트에서 자손 컴포넌트로 prop를 내려줄 때 자손이 몇대에 걸쳐서 멀리 있으면 자식, 자식의 자식, 자식의 자식의 자식으로 계속해서 props를 내려줘야하는 props drilling 문제도 생기게 된다.

 

그렇기 때문에 상태관리라는 개념이 생기고 상태를 효율적으로 관리하기 위한 상태 관리 도구와 라이브러리가 생기기 시작했다.

출처 : https://yamoo9.github.io/react-master/lecture/rd-redux.html

 

상태관리 실습 : CMarket Hooks

본격적으로 상태 관리 라이브러리를 사용하기 전에 React로 상태가 어떻게 사용이되고 React Hook을 사용하여 상태를 관리하면 어떤 부분이 불편한지 실습하면서 알아보는 과제였다.

 

웹페이지는 대부분 구현이 되어있고 몇몇 기능만 추가로 구현하는 과제였다.

 

장바구니 담기 버튼을 누르면 장바구니에 실제로 item이 추가되고 수량조절 버튼과 삭제 버튼만 구현하면 되는 간단한 과제였다.

 

문제는 소스코드를 분석하는데 오래걸렸다. 소스 코드가 한눈에 알아보기 힘들게 되어 있었다. 특히 이번 주제인 상태가 계속 props로 내려오는 props drilling을 실제로 구현해 놓으셔서 더 복잡하게 느껴진 것 같다. (일부러 이렇게 만들어 놓으신 것 같다.😅)

 

장바구니 버튼 구현

장바구니 버튼을 누르면 장바구니에 물건 추가되는데 이미있는 물건이면 수량이 1증가하고, 없는 물건이면 새롭게 물건이 추가되도록 함수를 구현했다. 

장바구니 버튼을 누르면 handleClick 함수가 실행이되면서 인자 2개 event, id가 전달된다.(event인자는 쓰지는 않았다.)

cartItems이라는 state는 현재 장바구니에 있는 물건 객체를 요소로 가지는 배열이다.

cartItems 배열을 새로운 배열 arr에 담고 arr을 돌면서 일치하는 id 가 있으면 그 객체의 quantity프로퍼티의 값을 1증가시켜준다. 만약 arr안에 일치하는 id가 없으면 새롭게 객체를 만들어서 push 해준다.

그리고 arr을 setCartItems 함수에 넣어줘서 cartItem 상태를 변경시켜주면 된다.

 

 

수량조절 버튼

input 버튼 자체는 구현되어 있었고 함수만 만들어보았다.

input창의 숫자가 변경이되면 handleQuantityChange 함수가 실행이된다.

장바구니 버튼과 비슷하게 배열을 새로 만들어서 장바구니 물건의 id중에 인자로받은 id와 같은 id가 있으면 그 id가 있는 객체의 quantity를 input창에 있는 숫자로 바꿔주면 된다. 그리고 새로운 배열을 setCartItems에 넣어서 상태를 변경해준다.

 

삭제 버튼

handleDelete 함수도 마찬가지로 해당 id의 객체를 cartItems에서 빼주면 된다. filter함수를 사용하여 새로운 배열에 id가 일치하지 않는 요소만 넣고 setCartItems 함수로 상태를 변경해준다.

 

 

이번 과제에서 함수 구현 자체는 쉬웠는데 전체적인 흐름을 파악하는데 오랜 시간이 걸린 것 같다. props가 어디서 내려오는지, 상태를 어디에 선언해야하는지 등 컴포넌트를 왔다갔다 하면서 파악하려고 하니까 복잡하게 느껴졌다.

props drilling 같은 경우도 어떤 느낌인지 알 수 있었다. pros를 사용하지도 않는 컴포넌트에도 거쳐가기 위해서 props를 내려줘야 한다는 것이 비효율적인것 같다.