일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Babel
- react
- Javascript
- background tab
- Render Props
- React 공식문서
- CSS
- React 고급 안내서
- React 18 Nextjs
- codingtest
- getUTCDate
- React18
- background setttimeout
- React API 참고서
- next13 head
- react hook
- hook
- React 고급안내서
- 고급안내서
- React 18
- background setInterval
- Nextjs
- context
- RTK Query
- Nextjs React 18
- react-helmet
- Programmers
- background: url
- notFound()
- Next13
- Today
- Total
akjfal
9/19 본문
import { useState, useContext } from 'react';
import { useDispatch, StoreContext } from 'redux-react-hook';
export default function useSwitchState() {
const [newLogin, setNewLogin] = useState();
const store = useContext(StoreContext);
const todos = store.getState();
const dispatch = useDispatch();
function addSwitch() {
dispatch({ type: 'LOG_BUTTON', login: newLogin });
setNewSwitch();
}
return {
todos, newLogin, setNewLogin, addSwitch,
};
}
여기서 setNewSwitch()의 함수 안에는 뭐가 들어가야 하는걸까?
TypeError: setNewLogin is not a function
import React from 'react';
import { LogButton } from '../../styles';
export default function Button({
todos, newLogin, setNewLogin, addLogin,
}) {
return (
<LogButton
onClick={() => {
setNewLogin();
addLogin();
}}
value={newLogin}
>
{todos.logstate ? 'Logout' : 'Login'}
</LogButton>
);
}
1번 해결 시도 - logic-hook에 있는 setNewLogin속 인자를 없애보았다.-실패
2번 해결 시도 - switch useState의 초기값을 클릭 다음으로 놓았더니 스위치 버그가 고쳐졌다. - true로 설정하므로서 초기값 false다음 값이 제대로 설정됨
새로운 해결책 -> addSwitch위치를 onclick에서 return 위로 옮겼다.
export default function IosSwitch({ newSwitch, setNewSwitch, addSwitch }) {
addSwitch();
return (
<FormGroup>
<FormControlLabel
control={(
<IOSSwitch
onChange={(e) => {
setNewSwitch(e.target.checked);
}}
value={newSwitch}
/>
)}
/>
</FormGroup>
);
}
3번째 시도 -> interface에 logic hook을 잘못 받고 있어 수정했다.
문제 발생 login logout이 제대로 작동하지 않는다
1번 수정 시도 -> hook폴더의 setNewLogin(!newLogin) 넣기 시도 -> 깊이 오류 -> 무한 루프가 돌거나 그런듯하다
4번째 시도 ->
// addLogin();
return (
<LogButton
onClick={(e) => {
console.log(`newLogin : ${newLogin}`);
setNewLogin(!newLogin);
}}
value={newLogin}
>
newLogin이 계속 바뀐다. addLogin위치를 다시 잡아야할듯하다?
해결 5 ->
logic hook의 부분을
function addLogin() {
console.log(`addLogin : ${newLogin}`);
dispatch({ type: 'LOG_BUTTON', login: !newLogin });
}
setNewLogin을 바꿔버렸더니 해결이 되었다?
e.target.checked는 한번 실행되고 나면 데이터가 사라지는 듯하다
왜 setNewSwitch를 없애버리면 todo마져 실행되지 안는 것일까?
setNewSwitch 에 아무런것도 넣지안더라도 실행시키는 이유 -> 실행시키지 안으면 함수이외의 것이 전혀 실행되지 안는다. why?
setNewSwitch()로만 냅두었더니 상위것들 싱행이 2번만 된다 왜일까 -> 처음 false가 들어간다 -> ()이므로 undefined가 들어간다 -> 같은 행동 반복 -> 변하는것이 없으므로 싱행되지 않는다
결론 setNewSwitch는 return 위의 변수들을 실행시키기 위하여 사용하는것이다. 그렇다면 왜 굳이 setUseState를 사용하면서 이것을 사용할까 왜지?
문제점 router를 하는데 초기화면에 모든 화면이다 보인다 이건문제인데…
-> switch위로 root값을 빼버림
interface에서는 문제가 없는데 pages에서 사용하려고 하니 reducer의 내용을 사용할 수 가 없다.