data를 get으로 불러와서 mypage > profile 넘겨주고 useState에 할당하는데 넣어지질 않음. 화면은 새로고침을 하면 데이터가 유지되지 않음.
function Mypage() {
const [Modify, setModify] = useState(true);
const [ownerData, setOwnerData] = useState(undefined);
const fetchPorfolioOwner = async () => {
const res = await Api.get("currentUser");
setOwnerData(res.data);
};
useEffect(() => {
fetchPorfolioOwner();
}, []);
useState({})
>useState(undefined)
로 변경해준다
<Photo
style={{
backgroundImage: `url(https://pinkpig-bucket.s3.ap-northeast-2.amazonaws.com/${ownerData?.image}.png)`,
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
}}
/>
<Name>{ownerData?.user_name}</Name>
ownerData?.user_name
,ownerData?.image
에도 ?를 넣어 optional chaining을 적용해준다.
.
다음을 찾지 못해 오류를 뱉어내기 때문에.. mui switch와 modal을 클릭핸들러로 연동하는 중 동작 animation이 매끄럽지 못한 이슈가 발생했다.
import { styled } from "@mui/material/styles";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
const IOSSwitch = styled((props) => (
<Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
width: 340,
height: 60,
padding: 0,
...
}));
const RegisterBtn = ({ open, handleOpen }) => {
return (
<FormControlLabel
control={
<IOSSwitch
sx={{ m: 1 }}
checked={open}
onChange={() => {
handleOpen();
}}
/>
}
/>
);
};
export default RegisterBtn;
결론은
const IOSSwitch
styled-component 부분을RegisterBtn
밖으로 빼줘야 한다. 그 이유는 레지스터 버튼은 결국 함수라고 볼 수 있는데, 재 렌더링시 항상 버튼이 생성된다고 볼 수 있다. 따라서 모달을 클릭할 때 마다 새로운 styled-component가 적용된 버튼이 생성되었던 것. 이 문제는 간단하게 함수 밖으로 끄집어 내주면서 해결되었다. 이 이슈를 통해서 쓸데없는 재랜더링을 최소화하는 것의 중요성을 깨달았다...!