[최선우] custom hook 실습 #7
Conversation
| <div> | ||
| <h2>useSomething 실습</h2> | ||
| {erase ? <div>안녕</div> : null} | ||
| <button onClick={toggleErase}>눌러보기</button> |
There was a problem hiding this comment.
깔끔해서 딱히 할말이 없네요... 하나 작성해보자면 button에 aria-label 추가해보는 것도 좋을 것 같아요!
| export const useErasebtn = (initialValue) => { | ||
| const [erase, setErase] = useState(initialValue); | ||
|
|
||
| const toggleErase = () => { | ||
|
|
There was a problem hiding this comment.
함수명이 useToggle처럼 더 일반적인 이름이면 다양한 상황에서도 쓰기 좋을 것 같아요!
|
|
||
| const toggleErase = () => { | ||
|
|
||
| setErase((prev) => !prev); |
There was a problem hiding this comment.
토글을 setErase(prev => !prev) 방식으로 현재 상태를 기준으로 표현한 것 좋은 것 같아요!
|
|
||
| const toggleErase = () => { | ||
|
|
||
| setErase((prev) => !prev); |
There was a problem hiding this comment.
setErase에 prev => !prev를 사용하는 방식이 깔끔하고 안정적인 거 같아용
이전 값을 기준으로 바꾸기 때문에, 상태가 바뀌는 중이더라도 정확하게 토글이 잘 작동한다는 점에서 잘 작성하신 거 같습니다 !
There was a problem hiding this comment.
버튼을 키고 끌 수 있도록, 간단하고 직관적으로 코드 잘 작성해주신 것 같아요!
| export const useErasebtn = (initialValue) => { | ||
| const [erase, setErase] = useState(initialValue); | ||
|
|
||
| const toggleErase = () => { |
There was a problem hiding this comment.
토글 기능을 활용해서 껐다 켰다 할 수 있게 만든 점이 인상 깊어요!
| return ( | ||
| <div> | ||
| <h2>useSomething 실습</h2> | ||
| {erase ? <div>안녕</div> : null} |
There was a problem hiding this comment.
erase ? … : null 로 간결하게 표현한 부분이 인상깊어요!
| export const useErasebtn = (initialValue) => { | ||
| const [erase, setErase] = useState(initialValue); |
There was a problem hiding this comment.
여러 컴포넌트에서 지우기 버튼 on/off 같은 이진 상태를 쉽게 관리 가능해서 범용성이 넓을 것 같습니다
|
|
||
| const toggleErase = () => { | ||
|
|
||
| setErase((prev) => !prev); |
There was a problem hiding this comment.
단순히 setErase(!erase) 하는 것보다 안전한 것 같아용
구현 내용