[박수연] custom hook 실습 #3
Conversation
| import { useState } from "react"; | ||
|
|
||
| export const useToggle = (initialValue = false) => { | ||
| const [isOn, setOn] = useState(initialValue); |
There was a problem hiding this comment.
하트랑 별이 너무 귀엽네요 !
setOn보다 setIsOn이 더 자연스러울 것 같아요 !
| <h2>useToggle 실습!!</h2> | ||
| <p>현재 상태: {isOn ? "❤️" : "⭐"}</p> | ||
| <button onClick={toggle}> | ||
| {isOn ? "하트" : "별"} |
There was a problem hiding this comment.
간단하지만 아이디어가 귀여운 것 같아요
버튼 텍스트를 하트, 별 말고 모양 바꾸기로 하면 의미가 더 명확해질 것 같아요
| export const YourOwnHookPage = () => { | ||
| // const { something... } = useSomething(); | ||
| // 하단 UI에 자유롭게 위에서 받아온 값들을 바인딩 해보세요~ | ||
| const { isOn, toggle } = useToggle(); |
There was a problem hiding this comment.
하트, 별로 나타나는 게 귀엽네요
useToggle(false) 로 초기값 명시해주면 이해하기 더 쉬울 것 같아요!
|
|
||
| const toggle = () => { | ||
| setOn((prev) => !prev); | ||
| }; |
There was a problem hiding this comment.
setOn에 prev => !prev를 사용하는 방식이 깔끔하고 안정적인 거 같아용
이전 값을 기준으로 바꾸기 때문에, 상태가 바뀌는 중이더라도 정확하게 토글이 잘 작동한다는 점에서 잘 작성하신 거 같습니다 !
There was a problem hiding this comment.
true, false 상태를 관리하는 것은 자주 쓰이기에 커스텀훅으로 좋은 것 같아요!
| @@ -0,0 +1,11 @@ | |||
| import { useState } from "react"; | |||
|
|
|||
| export const useToggle = (initialValue = false) => { | |||
There was a problem hiding this comment.
두 가지의 상태를 왔다 갔다 하는 점을 토글을 활용해서 구현한 부분이 인상 깊어요!! 아이디어도 너무 귀엽습니다:) 다음에는 더 많은 기호들이 랜덤으로 출력되는 커스텀훅을 구현해봐도 재밌을 것 같아요!
| const [isOn, setOn] = useState(initialValue); | ||
|
|
||
| const toggle = () => { | ||
| setOn((prev) => !prev); |
There was a problem hiding this comment.
setOn((prev) => !prev)로 토글을 만든 패턴이 깔끔한 것 같아요!!
| @@ -0,0 +1,11 @@ | |||
| import { useState } from "react"; | |||
|
|
|||
| export const useToggle = (initialValue = false) => { | |||
There was a problem hiding this comment.
initialValue 파라미터를 두어 기본값을 유연하게 지정할 수 있어 좋은 것 같습니다
| <div> | ||
| <h2>useSomething 실습</h2> | ||
| <h2>useToggle 실습!!</h2> | ||
| <p>현재 상태: {isOn ? "❤️" : "⭐"}</p> |
구현 내용