[이보연] 커스텀훅 실습 #11
Open
[이보연] 커스텀훅 실습 #11
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
leeboyeon17
commented
Aug 2, 2025
leeboyeon17
commented
- useWindowSize로 리팩토링
- useCountDown으로 리팩토링
- useDice 구현
There was a problem hiding this comment.
코드에 대한 설명 주석을 써주셔서 읽기 편한 것 같아요
주석을 조금 더 간단하게 써도 좋을 것 같아요
jyeon03
reviewed
Aug 4, 2025
| @@ -0,0 +1,62 @@ | |||
| import { useState, useEffect } from "react"; //리액트에서 useState, useEffect 훅을 불러옴 | |||
|
|
|||
| //useDice라는 커스텀 훅 정의 시작 | |||
krlyeon
approved these changes
Aug 5, 2025
Comment on lines
+16
to
+22
| //사용자가 클릭시에 호출될 함수 | ||
| const rollDice = () => { | ||
| if (!rolling) setRolling(true); | ||
| //주사위가 이미 굴러가고 있으면(rolling이라면) 무시하고, | ||
| //아니라면 rolling을 true로 바꿔서 주사위 굴릴 때의 애니메이션을 시작함 | ||
| //rolling 도중 중복 클릭을 막기 위함 | ||
| }; |
There was a problem hiding this comment.
아이디어가 너무 귀엽네요
섹션 단위로 주석을 묶어 요약하면 더 좋을 것 같습니다😊
wonpark1
reviewed
Aug 5, 2025
| //컴포넌트에서 사용할 수 있도록 현재 상태와 함수들을 외부에 전달하는 것임 | ||
| //이제 jsx파일의 컴포넌트에서 useDice()로 불러와서 쓸 수 있게 됨 | ||
|
|
||
| }; //훅 정의 종료 No newline at end of file |
There was a problem hiding this comment.
중복 클릭을 방지하는 rolling 상태까지 함께 고려한 점이 인상깉네요!
+주석을 간단하게 달면 더 깔끔할 것 같아요
thisminji
reviewed
Aug 7, 2025
| clearInterval(interval);// 숫자 변경(위에서 정의한 interval) 중지 | ||
| setRolling(false); //rolling 상태 false로 되돌림 | ||
| }, 800); //1000ms(1초) 후 종료 | ||
|
|
There was a problem hiding this comment.
const ROLL_INTERVAL = 100;
const ROLL_DURATION = 800;
이런 식으로 주사위 값 고정 시간 설정을 변수로 빼면 더 좋을 거 같아요!
KimYeonBee
reviewed
Aug 9, 2025
| const [rolling, setRolling] = useState(false); | ||
| //주사위가 굴러가고 있는지 여부를 나타내는 상태(rolling)를 만듦 | ||
| //초기 상태는 false, 클릭 시 true로 바뀌었다가 다 굴러가면 다시 false가 됨 | ||
|
|
Soi-coding
approved these changes
Aug 27, 2025
| //<<주사위를 굴릴 때 숫자가 반복적으로 바뀌는 애니메이션 지정>> | ||
| //0.1초마다 실행되는 반복 타이머 설정(숫자가 계속 바뀌게 하는 부분) | ||
| const interval = setInterval(() => { | ||
| const newValue = Math.floor(Math.random() * 6) +1; //1.newValue가 가질 수 있는 숫자들을 만듦 |
There was a problem hiding this comment.
1~6이라는 주사위 숫자를 생성하도록 const newValue = Math.floor(Math.random() * 6) + 1; 라고 잘 작성해주신 것 같아요!
seoyeon435
reviewed
Aug 28, 2025
| clearTimeout(timeout); | ||
| }; | ||
|
|
||
| }, [rolling]); |
There was a problem hiding this comment.
단순히 주사위 값을 바꾸는 것이 아니라 rolling 상태를 둔 점이 인상깊어요!
Hyunuk-Lee
reviewed
Aug 28, 2025
|
|
||
| //사용자가 클릭시에 호출될 함수 | ||
| const rollDice = () => { | ||
| if (!rolling) setRolling(true); |
There was a problem hiding this comment.
if (!rolling) 조건으로 애니메이션 중에 중복 실행을 막은 점이 좋은 것 같습니다
HongYounKim
reviewed
Aug 28, 2025
| //컴포넌트에서 사용할 수 있도록 현재 상태와 함수들을 외부에 전달하는 것임 | ||
| //이제 jsx파일의 컴포넌트에서 useDice()로 불러와서 쓸 수 있게 됨 | ||
|
|
||
| }; //훅 정의 종료 No newline at end of file |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.