[남소이] 커스텀 훅 실습 #10
[남소이] 커스텀 훅 실습 #10
Conversation
| @@ -0,0 +1,37 @@ | |||
| // 여러분의 use{Something}을 만들어주세요! | |||
| // 정답은 없습니다. 커스텀훅의 필요성을 스스로 느껴보세요. | |||
| // 아이디어를 생각하고, 스스로 구현하다가 어려우면 손 들어주세요! | |||
There was a problem hiding this comment.
포춘쿠키 아이디어 좋은 것 같아요
주석은 없애도 좋을 것 같아요
| en: "Open your mind and try new experiences.", | ||
| ko: "마음을 열고 새로운 경험에 도전하세요.", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
포춘 쿠키 메세지 데이터가 많아지면 따로 파일 분리해도 좋을 것 같습니다!
| <h2>useSomething 실습</h2> | ||
| {!selected ? ( | ||
| <> | ||
| <h3>하나를 선택해 보세요!</h3> |
There was a problem hiding this comment.
나중에 쿠키를 다시 뽑을 수 있는 “다시하기” 버튼도 추가해보면 더 좋을 것 같아용
| selected, | ||
| selectFortune, | ||
| }; | ||
| } No newline at end of file |
There was a problem hiding this comment.
현재는 index를 받아서 메시지를 선택하는 방식인데 랜덤으로 출력되게 하는 것도 재밌을 것 같네요!
| selected, | ||
| selectFortune, | ||
| }; | ||
| } No newline at end of file |
There was a problem hiding this comment.
useFortuneCookie 훅 구조가 단순하면서도 직관적이네요!
상태 관리와 데이터 선택 로직이 잘 분리되어서 재사용성이 높을 거 같아용 굳굳
| /> | ||
| ))} | ||
| </div> | ||
| </> |
| // 아이디어를 생각하고, 스스로 구현하다가 어려우면 손 들어주세요! | ||
| import { useState } from "react"; | ||
|
|
||
| const fortunes = [ |
There was a problem hiding this comment.
배열 안에서 여러 메시지를 자유롭게 추가/삭제 할 수 있는 점이 인상 깊어요. 이후에 이 메시지들을 랜덤으로 출력시켜도 좋을 것 같습니다!
| en: "Open your mind and try new experiences.", | ||
| ko: "마음을 열고 새로운 경험에 도전하세요.", | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
fortunes 데이터를 구조화해 두셔서 항목 추가/삭제가 쉬울 것 같습니다!
| export function useFortuneCookie() { | ||
| const [selected, setSelected] = useState(null); | ||
|
|
||
| const selectFortune = (index) => { | ||
| setSelected(fortunes[index]); | ||
| }; | ||
|
|
||
| return { | ||
| fortunes, | ||
| selected, | ||
| selectFortune, | ||
| }; | ||
| } No newline at end of file |
There was a problem hiding this comment.
포춘쿠키처럼 무작위 선택 메시지를 관리하는 훅은 실습과 프로젝트에서 활용도 높을 것 같고 재미있는 아이디어 같습니다
| margin: "15px auto", | ||
| }} | ||
| > | ||
| <h3>오늘의 명언</h3> |
There was a problem hiding this comment.
아이디어가 좋은 것 같아요! 사진도 불러와서 디테일 추가한 점이 좋은것 같아요
구현 내용
Refactor: useWindowSize로 리팩토링
Refactor: useCountdown으로 리팩토링
Feature: useFortuneCookie 구현