🎀 주간 목표 달성 확인
✅ 딥다이브 스터디 진행 (깃헙 자료 보러가기)
✅ 기술 면접 스터디 (깃헙 바로가기)
✅ Next.js 강의 듣기
✅ useState 확실하게 사용하기 (함수형 업데이트) 포스팅 바로가기
🎀 피드백
📎 useState 함수형 업데이트하기
const [isFavorite, setIsFavorite] = useState(false);
const handleClickActiveFavorite = (e: any) => {
e.preventDefault();
setIsFavorite(!isFavorite);
};위 코드는 boolean 값을 가진 isFavorite의 토글을 구현해내는 코드이다.
handleClickActiveFavorite 함수가 실행되면 isFavorite에 저장된 값의 반대 값을 반환한다.
그런데 react는 최적화를 위해 useState를 한꺼번에 모아 비동기로 처리하고,
그로 인해 useState 호출 시점과 실제 상태 업데이트 시점이 달라 값이 다를 수 있다는 것을 명심해야한다.
우리는 업데이트하려는 값이 현재 state 값을 업데이트하는지 확신할 수 없게되는 것이다.
하지만 함수형 업데이트를 해주면 안전하게 현재 값에 대한 업데이트 진행이 가능해진다!
const handleClickActiveFavorite = (e: any) => {
e.preventDefault();
setIsFavorite((currentValue) => !currentValue);
};함수형 업데이트로 인해 react는 이전 값에 의존하지 않고 항상 최신 상태를 보장한다.
📎 타입 지정을 습관화 하자
<form onSubmit={handleSubmitSearchForm} className={styles.searchBar}>
<Image src={searchIcon} alt="검색 아이콘 이미지" tabIndex={-1} />
<input
placeholder="링크를 검색해 보세요."
value={searchKeyword}
onChange={handleChangeSearchKeyword}
/>
{searchKeyword.length > 0 ? (
<button
aria-label="클릭하여 내용 지우기"
onClick={handleClickClearInput}
>
<Image src={clearIcon} alt="내용 삭제 아이콘" tabIndex={-1} />
</button>
) : null}
</form>검색 소팅을 구현하는 form이다.
내가 원하는 것은, input에 값을 입력하고 enter 치면 handleSubmitSearchForm이 작동하는 것.
하지만 어째서인지 아무런 반응도 없었다.
수상해서 이것저것 콘솔에 찍어보니... 💣
input을 초기화하는 button에 내가 type값을 지정해 주지 않아서 해당 button이 눌리고 있었다.
그리고 input값은 초기화되고 있었던 것...
부랴부랴 input과 button에 type값을 넣어주었따.
<input type="text" />
<button type="button"></button>아직 코드를 치면서 type이 겹치는 오류는 처음 마주치게 된거라 당황스러운데,
사소한 것 하나하나 습관으로 만들어두지 않으면 안되겠다는 생각이 들었다.
사실 너무 당연한건데 간과하다니... 반성하게 되었다. 😭
📎 깃 오류 해결
원격저장소의 새로운 commit이 존재하는데 git pull을 하지 않은 상태에서 로컬저장소에 새로운 commit을 했더니 오류가 생겨 버렸다.
git pull --rebase
블로그 글을 참고하여 rebase로 해결할 수 있었다!
git pull을 반드시 습관하해야 할 것 같다.
🎀 한주를 마무리하며!
🪄 KEEP
- 파트3 멘토님의 빠른 코드 리뷰로 빠른 수정이 가능했다. 멘토님 덕분에 이번 파트에도 많이 성장하고 있음을 직접적으로 느끼고 있다. 😎
🪄 PROBLEM
- 분명 지난번에 리뷰 받았던
console.log같은 코드는 무조건 삭제하기를 지켜내지 못했다. 아주 사소한 듯 보여도 지키지 않으면 큰 문제가 되는 것인데 말이다...
🪄 TRY
- 사소한 듯 보여서 간과하고 지키지 못했던 것들을 찾아 바로 잡아야겠다.
