MISSION2 / 최규민 #16
MISSION2 / 최규민 #16
Conversation
There was a problem hiding this comment.
안녕하세요 규민님! 회장단 업무보랴 시험보느라 고생하셨습니다!
쿠폰을 사용하고, 이를 위한 버튼을 활성화하기 위한 로직을,
또 커피를 결제하고, 이 버튼을 활성화하기 위한 로직을 이렇게 분리하는 게 맞을지 (최선인지..?) , 혹은 더 좋은 방법이 있는지 조언 해주시면 감사하겠습니다.
또 아쉬웠던 점은, 커피 결제의 로직에서
{!orderCoffee ? null : <button onClick={() => {buyCoffee()}}> 커피 결제 }
저는 평소에 ~하면 ~하다 식으로 코드를 짜고싶은데 ~아니면 ~하다 식으로 코드를 짜게돼서 신경이 쓰입니다... 보통 이런식으로도 코드를 짜시나요?
두 개를 한꺼번에 답변해드리자면, 일단 아래에도 남겼지만 불필요한 상태가 있다고 생각합니다.(아니라면 코멘트 남겨주세요) 상태는 강력한 도구지만 안 쓸 수 있는 상황에서는 안쓰는게 좋은 양날의 검(?) 같은 거라고 생각해요. 그래서 불필요한 상태를 어떻게 합칠 수 있는 지 먼저 고민해보시면 많은 공부가 될거에요!
두 번째는 아쉬운 부분은 아니고 잘 접근하셨다고 생각이 들어요 ! 조건부 렌더링 꽤나 자주 쓰는 기법입니다. 어떻게 보면 JSX의 강력한 점이라고 생각하기 때문에, 필요한 부분이라면 사용하셔야 된다고 생각합니다!
| return <div> | ||
| <MyCard/> | ||
| </div>; |
|
|
||
| function App() { |
There was a problem hiding this comment.
lint나 prettier가 적용되지 않았네요...!
다음 미션부터는 꼭 적용하시길
|
|
||
| function App() { | ||
| const [couponNum, setCouponNum] = useState(0); | ||
| const [useCoupon, setUseCoupon] = useState(false); |
| const [orderCoffee, setOrderCoffee] = useState(true); | ||
|
|
There was a problem hiding this comment.
관례상 boolean값에는 is~ has~ 등의 접두사를 붙이면 이해하기 편할 것 같아요
| setUseCoupon(true); | ||
| setCouponNum(0); | ||
| setOrderCoffee(false); |
There was a problem hiding this comment.
지금 코드를 보니 useCoupon과 orderCoffee의 상태가 함께 변경되고 있네요!
그렇담 상태가 불필요하게 사용되고 있는 상황 같은데 ...! 한번 고민해보시지요
| <div>{couponNum}</div> | ||
|
|
||
| <div> | ||
| {!orderCoffee ? null : <button onClick={() => {buyCoffee()}}> 커피 결제 </button>} |
There was a problem hiding this comment.
이렇게도 가능합니다~ 가급적 요렇게 쓰시길 권장드려요
| {!orderCoffee ? null : <button onClick={() => {buyCoffee()}}> 커피 결제 </button>} | |
| {!orderCoffee ? null : <button onClick={buyCoffee}> 커피 결제 </button>} |
| ); | ||
|
|
||
| } | ||
| export default App; |
|
|
||
| <div> | ||
| {!orderCoffee ? null : <button onClick={() => {buyCoffee()}}> 커피 결제 </button>} | ||
| {useCoupon ? <button onClick={() => {drinkCoffee()}}> 쿠폰 사용 </button> : null } |
|
|
||
| const buyCoffee = () => { | ||
| setCouponNum(couponNum+1); | ||
| if (couponNum === 10){ |
1. 구현 모습
[mission] 2주차 미션입니다! #8
-2. 쿠폰을 적립하는 '커피 결제' 버튼을 10번 누르면 '쿠폰 사용' 버튼으로 변합니다.
-3. '쿠폰 사용' 버튼을 누르면 처음 단계로 되돌아가 '커피 결제' 버튼이 활성화 됩니다.
2. 해결 과정
선언
쿠폰 개수를 저장하는 couponNum
'쿠폰 사용' 버튼을 활성화시키는 useCoupon
'커피 결제' 버튼을 활성화시키는 orderCoffee
쿠폰이 10개가 되어도 쿠폰을 사용하지 않고 계속 커피 결제를 하는 경우를 어떻게 처리할지 고민해보았습니다. 쿠폰 10개를 모으면 자동으로 커피 교환권으로 바꿔주고, 커피 결제에는 간섭하지 않는 방법을 생각해보았으나 아직 제 수준에서는 복잡해서..! 그대신
쿠폰이 10개가 되면 커피 결제 버튼을 비활성화, 쿠폰 사용 버튼을 활성화
const buyCoffee = () => { setCouponNum(couponNum+1); if (couponNum === 10){ setUseCoupon(true); setCouponNum(0); setOrderCoffee(false); }하여 강제로 쿠폰을 사용하고 한 루틴을 돌게 했습니다.
3. To 리뷰어에게
쿠폰을 사용하고, 이를 위한 버튼을 활성화하기 위한 로직을,
또 커피를 결제하고, 이 버튼을 활성화하기 위한 로직을 이렇게 분리하는 게 맞을지 (최선인지..?) , 혹은 더 좋은 방법이 있는지 조언 해주시면 감사하겠습니다.
또 아쉬웠던 점은, 커피 결제의 로직에서
{!orderCoffee ? null : <button onClick={() => {buyCoffee()}}> 커피 결제 </button>}저는 평소에 ~하면 ~하다 식으로 코드를 짜고싶은데 ~아니면 ~하다 식으로 코드를 짜게돼서 신경이 쓰입니다... 보통 이런식으로도 코드를 짜시나요?
바쁜 시간 내어 도와주셔서 진심으로 감사드립니다! 좋은 한 주 보내세요 🙂