오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.
이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.
과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!
이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다.
if (existingCountry) {
existingCountry.gold = gold || existingCountry.gold;
existingCountry.silver = silver || existingCountry.silver;
existingCountry.bronze = bronze || existingCountry.bronze;
setMedalList([...medalList]);
resetForm();
} else {
alert("업데이트할 국가를 찾을 수 없습니다!");
return null;
}
};
여기서 코드 한줄을 가지고 논리 or 연산자(||)대해 알아보겠다.
existingCountry.gold = gold || existingCountry.gold;
- 이 줄은 gold 변수의 값이 "truthy"(참으로 평가되는 값, 즉 null, undefined, 0, false, NaN, ''가 아닌 모든 값)인 경우, 그 값을 existingCountry.gold에 할당한다.
- 만약 gold가 "falsy"(거짓으로 평가되는 값)라면, 기존의 existingCountry.gold 값을 유지한다.
- 이는 gold 값이 제공되었을 때만 업데이트하고, 그렇지 않으면 기존 값을 유지하는 효과가 있다.
다른 예시를 들어보겠다.
existingUser.name = newData.name || existingUser.name;
- 만약 newData.name이 존재하면(즉, 빈 문자열이 아니고 undefined나 null이 아니면) 그 값을 existingUser.name에 할당한다.
- 그렇지 않으면 기존의 existingUser.name 값을 유지한다.
- 예를 들어, newData.name이 "John"이라면, existingUser.name은 "John"이 된다.
- 만약 newData.name이 undefined라면, 기존의 existingUser.name 값이 유지된다.
이렇게 과제를 하면서 논리연산자에 대해 더 깊게 알 수 있었다! 이 논리 or 연산자는 업데이트할 상황이 생기면 많이 사용할 것 같아서 기억해두는 것이 좋을 것 같다!
'개인과제' 카테고리의 다른 글
로그인 기능 구현하기 (0) | 2024.08.27 |
---|---|
리액트로 만든 나만의 포켓몬 도감: 일주일간의 도전과 성장 (4) | 2024.08.26 |
Redux 사용해서 TodoList 만들기! (0) | 2024.08.22 |
Context API로 Props Drilling 해결하기 (0) | 2024.08.21 |
나만의 TodoList 만들어보기 (0) | 2024.08.13 |