[데이터 분석 웹 서비스 프로젝트] 22.04.29 DAY-9

garaming·2022년 4월 29일
0

[어? 이게 되네?? 팀] 일일회고

이슈

1. 데이터 useState 할당 문제

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을 적용해준다.

  • optional chaining 해주는 이유 : 초기값은 undefined로 컴퓨터는 js코드를 읽을 때 undefined의 . 다음을 찾지 못해 오류를 뱉어내기 때문에..

2. React Rendering

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가 적용된 버튼이 생성되었던 것. 이 문제는 간단하게 함수 밖으로 끄집어 내주면서 해결되었다. 이 이슈를 통해서 쓸데없는 재랜더링을 최소화하는 것의 중요성을 깨달았다...!

내일 할 일

  • 멤버 소개란 컴포넌트 완료
  • 코드 리팩토링 (주말까지)
profile
Connecting the dots

0개의 댓글