과제 피드백 - 김준현 튜터

안녕하세요 준호님, 김준현 튜터입니다. nbcamp에서 피드백을 드린 내용들을 github repository 내에도 issue로 남겨놓도록 하겠습니다.

깃 관련

깃에 commit message도 잘 작성 되어 있는 편이고, README.md 도 너무 완성도 있게 잘 작성해 주셨는데요. README를 수정하는 과정에서 수정할때마다 계속 push를 하셔서 github repo 내에서 업데이트를 확인하신 것 같더라구요. commit이라는 것은 보통 하나의 feature, 하나의 수정사항 등 최소화 된 목적 단위로 나누어서 올리는 것이 원칙입니다. README의 마크다운 파일을 미리보기 할 수 없어서 확인하시고자 올리신것일 경우 vscode에 extension에서 md파일을 미리보기 할 수 있는 확장프로그램을 추가한다던지 해서 md파일의 수정사항을 미리 로컬에서 확인하신 뒤, push를 하시는 것을 추천드립니다.

코드를 보면 국가명과 금은동 메달의 state 선언과 그에 맞는 수정 함수들이 저렇게 표시되어있는데, hooks를 사용하는 코드들은 최상단에 있는 것이 원칙이다 보니

  const [country, setCountry] = useState("");
  const [silverMedal, setSilverMedal] = useState(0);
  const [goldMedal, setGoldMedal] = useState(0);
  const [bronzeMedal, setBronzeMedal] = useState(0);

  const handleSetCountry = (e) => {
    setCountry(e.target.value);
  };

  const handleSetGold = (e) => {
    setGoldMedal(e.target.value);
  };

  const handleSetSilver = (e) => {
    setSilverMedal(e.target.value);
  };

  const handleSetBronze = (e) => {
    setBronzeMedal(e.target.value);
  };

위와 같이 수정해주심이 좀 더 좋습니다. 그리고 만일 개인 프로필 수정 페이지처럼 input field가 굉장히 많아지는 페이지가 된다면 위의 코드처럼 작성할 경우 10개가 넘는 state 변수와 10개가 넘는 input 함수들이 생기게 될 것입니다. country, goldMedal, silverMedal, bronzeMedal을 하나의 객체 state 변수로 선언하고, input 값을 넣어주는 함수도 한개로 관리해보시는 방법으로 refactoring 해보는 것을 추천드립니다.

https://github.com/PJH-FE/olympic/blob/036b88ecc4485d3af3f6d26c75a61997b54efb33/src/components/Form.jsx#L99-L104

onload event를 잘 사용해주셨으나, 이 과제를 진행할때에는 useEffect라는 hook에 대해 아직 공부하기 이전이었으니 공부를 하고 난 지금 한 번 리팩토링을 해보시길 추천드립니다. (저는 개인적으로 window.onload 이벤트를 사용하신 코드가 어디서 긁어온 코드가 아니라 준호님이 알고있는 지식으로 문제해결에 접근한 것 같이 느껴져서 아주 좋았습니다.)

PJH-FE / olympic

과제 피드백 - 김준현 튜터 #1

깃 관련

코드 관련