React 토글 버튼 조작 시 변경 사항 적용하기

Question

다음과 같이 토글 버튼을 구현하여 값이 변경될 경우, 변경된 내용을 API로 전송하고 변경된 내용을 다시 렌더링하고 싶습니다.하단에 버튼을 클릭하지 않고 토글로 값을 변경 시(toggleHandler 함수를 통해 noticeOption 값이 변경),변경 사항을 자동으로 API로 전송하고 화면에도 변경 사항을 적용할 방법을 알 수 있을까요?export default function Notice(){ // 상태값 초기화 const [noticeOption, setNoticeOption] = useState({ night_push : 0, event_push_recv : 0, event_sms_recv : 0, event_email_recv : 0, app_push_recv : 0, app_sms_recv : 0, app_email_recv :0, }) const fetchNoticeInfo = async (dvidx : number) => { ... const authInfo = { "dbidx": dvidx, "appver": 0, "logintype": 0, ...} try{ const {data, status} = await axios.post(`${API}`, authInfo , options); if(status === 200) { const { night_push, event_push_recv, event_sms_recv, ...} = data // 상태값으로 적용 setNoticeOption({night_push, event_push_recv, event_sms_recv, event_email_recv, }) } } catch(error){ console.log(error); alert('로그인에 실패하였습니다.'); } } // 변경 사항 API로 전송 const submitNoticeOption = async () => { try{ const {data, status} = await axios.post(`${API}/dev/403`, noticeOptions, options); if(status === 200){ alert("성공적으로 저장되었습니다.") } catch(e : unknown){ if(e instanceof Error){ console.log(e.message) } } } // 상태값 변경 const toggleHandler = (name : string, option : number) => { if(option === 0){ setNoticeOption({...noticeOption, [name] : 1}) } else{ setNoticeOption({...noticeOption, [name] : 0}) } } useEffect(()=>{ fetchNoticeInfo(Number(sessionStorage.getItem("pid"))); },[]) return( ...

{t('앱 푸시')}

... ) }// 토글 버튼export const Toggle = ({option, toggleHandler, name} : any) => { return ( <> toggleHandler(name, option)} >

); };

벼랑끝에서올라오는중 · Answer

제 짧은 소견으로는 토글이 켜졌을 때 커졌을 때 css이름이 다를 테니 해당 css이름이 바뀌는 event를 실시간으로 감지해서 바뀔 때마다 약관변경을 날리는 api를 호출합니다. 약관 변경을 날리는 api가 성공하면 화면을 그리는 함수를 재호출합니다.혹시 데이터를 미리 받아와서 뿌리고 있었다면 중앙저장 관리소 redux나 zustand를 사용하여 계속 저장해둔 데이터를 꺼내와서 setting해서 fetch함수를 호출해야겠죠?

그린티라떼 · Answer

처음 렌더링과, 나중 렌더링을 구분하기 위해 isInit이라는 상태값을 설정했습니다.그리고 최초로 fetch 해올때, isInit값을 true로 설정합니다. const [isInit, setIsInit] &#61; useState(false) const fetchNoticeInfo &#61; async (dvidx : number) &#61;> { .... setNoticeOption({night_push, event_push_recv, event_sms_recv, event_email_recv, app_push_recv, app_sms_recv, app_email_recv}) if(!isInit){ setIsInit(true); } }최초로 렌더링시 첫번째 useEffect()가 동작되고, toggleHandler로 noticeOption값이 변경시 두번쨰 useEffect함수가 동작 하도록 설정했습니다.... useEffect(()&#61;>{ fetchNoticeInfo(Number(sessionStorage.getItem(&#34;pid&#34;))); },[]) useEffect(()&#61;>{ if(isInit){ submitNoticeOption(); fetchNoticeInfo(Number(sessionStorage.getItem(&#34;pid&#34;))); } },[noticeOption])

React 토글 버튼 조작 시 변경 사항 적용하기

2개의 답변

Q&A 목록