state로 버튼 스타일 관리하기

Question

안녕하세요홈페이지를 개발 하며 독학 중인 리액트 입문자입니다현재 ott서비스 중 보관함 기능을 만들고 있는데요해당 영화 소개 페이지에서 '보관함에 저장하기' 버튼을 클릭하면 해당 영화 데이터를 보관함에 저장시키고 있습니다.클릭 전 (보관함에 저장X)클릭 후 (보관함에 저장된 상태)재클릭하면 보관함에서 삭제됩니다.데이터를 저장하는 보관함과 버튼 스타일 상태 값은 Redux로 생성하고 저장 중입니다.문제는, A영화 소개 페이지 에서 보관함버튼이 클릭된 상태인데 나머지 모든 영화 소개 페이지에 가보면 버튼의 상태값이 그대로 반영되어있습니다.그래서 다른 영화 보관함 버튼을 다시 클릭하면 보관함에서 A영화 데이터가 삭제됩니다.state 하나로 관리해서 모든 페이지에 그런 것 같은데..아니면 if 문이 true or false 값이 변경된 채 저장되어 그런것인가요?보관함에 저장된 데이터에 한해서만 변화를 주고 싶을 땐 어떻게 접근해야 하나요?도와주시면 감사하겠습니다!Redux state 버튼 스타일 let styleLocker &#61; createSlice({ name : 'styleLocker', initialState: '#000', reducers : { btnChangeLocker(state) { return '#F82F62'; }, btnChangeLocker02(state){ return '#000' }, } }) let btnText &#61; createSlice({ name : 'btnText', initialState: '보관함에 저장하기', reducers : { btnChangeText(state) { return '보관함에 저장됨' }, btnchangeText02(state) { return '보관함에 저장하기' } } })Redux (버튼 클릭에 따라 true false) let clickLocker &#61; createSlice({ name : 'clickLocker', initialState: 'true', reducers : { lockerIncrease(state) { return !state } } })<button id&#61;&#34;addLocker&#34; type&#61;&#34;button&#34; style&#61;{{ background: state.styleLocker }} onClick&#61;{(e) &#61;> { //보관함 저장 dispatch(lockerIncrease()) if (state.clickLocker) { dispatch(addLocker(data)); dispatch(btnChangeText()); e.target.style.background &#61; dispatch(btnChangeLocker()); } else { dispatch(deleteLocker(data)); dispatch(btnchangeText02()); e.target.style.background &#61; dispatch(btnChangeLocker02()); } }}> {state.btnText}제가 해본 시도는보관함에 저장된 데이터의 id와 url 파라미터의 id와 일치하는 하는 경우에 버튼 상태를 변경시키는 것을 해보았지만 실패했습니다.이 두 id는 영화 데이터의 id입니다.let { id } &#61; useParams(); var dataId &#61; lockerData.filter(function (lockerData) { return lockerData.id &#61;&#61; id; }) let lockerId &#61; dataId[0].idurl주소입니다.

심심하다능! · Answer

버튼 자체를 컴포넌트로 만드세요. 바로<button>태그를 삽입하지 않고 버튼컴포넌트를 분리하면 따로 적용될 겁니다. map를 이용해서 리스트에 리스트아이템컴포넌트를 구현하듯이요. 또는 맨 처음 리액트 배울 때 나오는 예시 중에 카운트 증감하는 컴포넌트 구현하는 것처럼요.

state로 버튼 스타일 관리하기

1개의 답변

#state 목록