상태관리
전역상태
- 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태
- 예를 들어 라이트모드/다크모드 설정, 언어 설정 등이 전역상태로 관리해야한다.
로컬상태
- 특정 컴포넌트 안에서만 관리되는 상태
데이터 무결성
- 데이터 무결성이란 데이터의 정확성 보장을 위해 데이터의 변경이나 수정에 제한을 두는 것
- 데이터 무결성을 위한 방법으로 Single source of truth(신뢰할 수 있는 단일 출처) 원칙있다. 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오다는 의미이다.
상태관리를 위한 툴
- React Context, Redux, Mobk 등
- 전역 상태 저장소를 제공한다
- Props drilling 이슈 해결해 준다.
- Props drilling이란
상위 컴포넌트의 state를 props를 통해 전달할 때 굳이 상태를 이용할 필요 없는 컴포넌트도 전달을 위해 상태를 내려줘야하는 상황을 의미한다. 예를 들어 a->b->c->d에서 d만 상태가 필요한 경우 b, c를 통해 전달해줘야한다.- 문제점
- 코드 가독성 나빠짐
- 코드 유지보수 어렵
- 불요하게 관여된 컴포넌트 또한 리렌더링됨
- 문제점
Cmarket (Hooks 버전) 과제
input의 vaule와 defaultValue
value={상태}의 경우 상태변경함수를 통해서만 값을 바꿀 수 있다. 그러므로 함수를 작성하지 않았다면 input의 값을 바꿀 수 없다. 하지만 값의 변동이 없어보이지만 이벤트는 작동하고 있다. 예를 들어 value={상태} 상태초기값이 5인데 input에 6을 입력하면 보이기에는 변경되지 않지만 event.target.value는 56이된다. 이 값을 상태변경함수에 전달에 준다면 상태가 변경되어 보이는 값도 56으로 변경이 될 것이다.
그러니깐 변경 안된다고 막 defaultValue로 변경하면 안된다. defaultValue={상태}지정하니깐 장바구니 목록삭제할 때 상품의 수량이 하나씩 밀려서 나왔다. 왜 그렇게 나왔는지는 정확한 이유는 모르겠다.
map
map은 콜백함수의 리턴값으로 요소를 바꿔준다. 그러므로 객체를 재할당 하고 싶다면 el.key = (변경하고 싶은 값) 으로 콜백함수를 작성하면 객체가 변경하고 싶은 값으로 변경된다. 그러므로 재할당해주는게 아니라 변경하고 싶은 객체를 리턴하는 콜백함수를 작성해야한다.
return도 꼭 까먹지 말기!
const handleQuantityChange = (quantity, itemId) => {
setCartItems(
cartItems.map(el => {
if (el.itemId === itemId) {
return { itemId: itemId, quantity: quantity } //객체 전체
} else return el
})
)
}마치며..
과제 구조 안 그려봤는데 한번 그려보고 했으면 도움됐었을 것 같다. 이게 어디서 내려오는 건지 계속 파일을 찾아 헤맸어서. value랑 defaultValue때문에 버린 1시간이 너무 아깝다. 왜 굳이 바꿔서 사서 고생했는지.. ㅋㅋ
오늘 스터디에서 알게된 메서드 활용해서 코테 문제 하나 풀었는데 그 방법이 가장 좋아요 많이 받은 방법이였어서 넘 뿌듯했다.
긍정적으로~✍️(◔◡◔)