프로젝트 루틴 리스트가 없을 때 Add your routine이라는 문구가 나오도록 만들어주었다.
이 부분을 해결하면서 조건부 렌더링이라는 것에 대해서 리액트 문서를 보았고
자바스크립트에서 흔히 사용되던 if문, 조건부 연산자를 사용하는 것과 비슷하여 금방 이해가 되었다.
그리고 return 밖에서 if문을 사용했을때는 내가 의도한 대로 렌더링 되지 않았는데
inline으로 처리하라는 방식을 보고 따라해보니까 내가 의도한대로 되었다..!
그리고 항상 문제였던,, 모달팝업,,,
BackdropProps라는 것을 알게되었고 공식 문서도 꼼꼼히 봐야겠다는것을 깨닫게 해줬다,,
모달 태그에 BackdropProps 스타일을 설정을 해주면서 뒷 배경같았던 회색 부분 처리가 되었다.
코드숨 공부방에서 코테 풀다가 시간이 없어서 집 와서 마저 다 풀었다.
카카오 코테 항상 어려운데 다 풀고 나서 생각해보면 머리속에 정리가 쏙 들어온다.
이번에 코테 풀고 리팩토링을 하면서
if / else if / else 사용에 대해서 다시 생각해보게 되었다.
참고는 이것.
https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html
Replace Nested Conditional with Guard Clauses
Replace Nested Conditional with Guard Clauses function getPayAmount() { let result; if (isDead) result = deadAmount(); else { if (isSeparated) result = separatedAmount(); else { if (isRetired) result = retiredAmount(); else result = normalPayAmount(); } }
refactoring.com
그리고 간단한것들이지만 상수값을 할당한 것들은 function 밖으로 빼주는것이 좋고
이들의 이름 첫글자는 대문자로 해주는것이 좋다는 것도 알게되었다.
또, for 반복문 사용을 지양하는것이 좋다는걸 종종 들었는데도 익숙해서 그런지ㅜ 놓을 수 없었던,,
이번에 리팩토링을 하면서 map을 사용했는데
직접 사용해서 그런지 잘 이해가 되었다 .
테스트 코드도 하나 작성해봤는데 앞으로는 테스트코드 작성에 익숙해지고 리팩토링 하는 습관을 가져야겠다.
댓글