[Week3 JS -> TS] 4세대 걸그룹 맞추기 TS 로 변환 #5
Conversation
| setScore(score + 1); | ||
| }; | ||
|
|
||
| const resetHandler = () => { |
There was a problem hiding this comment.
오 이렇게 reset해줬구나!
window.location.reload(); 아예 이렇게 새로고침을 해서 state를 처음 상태로 다 돌려주는 방법도 괜찮을 것 같아!!
| function Contents() { | ||
| const [score, setScore] = useState<number>(0); | ||
| const [currentQuestion, setCurrentQuestion] = useState<number>(0); | ||
| const [modalOn, setModalOn] = useState<boolean>(false); |
There was a problem hiding this comment.
깃프파 코드리뷰에 쓴 것처럼 modalOn도 boolean이면 is 붙여서 네이밍해줘도 좋겠다!!
| } | ||
| }; | ||
|
|
||
| const scoreHandler = () => { |
There was a problem hiding this comment.
단순 궁금증인데 scoreHandler 같은 경우에는 안에 set함수 하나만 있잖아! 근데 이걸 굳이 handler로 빼준 이유가 있을까?!
There was a problem hiding this comment.
단순 궁금증인데 scoreHandler 같은 경우에는 안에 set함수 하나만 있잖아! 근데 이걸 굳이 handler로 빼준 이유가 있을까?!
당시 과제할 당시에는 이 함수의 기능을 더 명시적으로 표현하고자 저렇게 함수를 구성했는데, 코드를 줄이려면 말해준 방법이 더 옳은 것 같아!
|
|
||
| const StContentsOption = styled.button` | ||
| border: 0; | ||
| padding: 10px 15px; |
There was a problem hiding this comment.
rem이랑 px이 섞여있어서 통일해주면 더 깔끔하겠다!
vsc에 px to rem 익스텐션 깔면 control+z로 간편하게 바꿀 수 있서! 이미 알고 있을수도 있지만!!
There was a problem hiding this comment.
와 모르던 익스텐션 알아갑니다. 코드도 수정하도록 할게!!!
| const [currentQuestion, setCurrentQuestion] = useState<number>(0); | ||
| const [modalOn, setModalOn] = useState<boolean>(false); | ||
| const [isCorrect, setIsCorrect] = useState<boolean>(false); | ||
| const { src, alt, options, answer } = questionData[currentQuestion]; |
There was a problem hiding this comment.
시루 구조분해할당 야무지게 잘 쓴다!! 난 아직 어색해서 잘 못쓰는데 많이 배워가!!
|
|
||
| border-radius: 16px; | ||
|
|
||
| &:hover { |
There was a problem hiding this comment.
cursor:pointer는 hover 속성에 적용해주지 않고 바깥에 선언해도 잘 적용되더라구요!
| </StContentsImgCard> | ||
| <StContentsAnswer> | ||
| {options.map((option, idx) => ( | ||
| <StContentsOption |
There was a problem hiding this comment.
button 태그니까 type=button을 써주면 더 좋을지도~
✨ 구현 기능 명세
children타입을 interface 로 지정해주어 타입 지정el의 타입을 어떻게 지정해주어야 하나 고민했는데 위와 같은 형식으로 지정해주니 해결되었음!onClick이벤트와isCorrectState 의 타입 지정ModalProps라는 interface 를 만들어주어 타입 지정, 함수인handleModal의 경우에 저런 식으로 타입 지정을 해 주어야 한다는 사실을 알게 되었음!!