방금 나온 따끈한 코드

[regularPark]

첫 주니까 간단한 코드를 들고 왔읍니다.

"모두 동의" 버튼 로직

• 세 가지 상태 중 하나만 true인 상태에서 아래 함수를 실행시키면 세 가지 상태가 모두 true값으로 변경
• 그외의 상태에는 !prev를 사용하여 토글링.

급하게 대처한 코드여서 길게 생각하지 않은 코드임덩. 그래서? 더 우아하고 깔-꼼하게 짤 수 있을 것 같은데.. 여러분의 고견이 듣고 싶어 공유합니다.

const toggleAgreeAll = () => {
  if (![privacy, marketing, analysis].every((item) => item)) {
    setPrivacy(true);
    setMarketing(true);
    setAnalysis(true);
  } else {
    setPrivacy((prev) => !prev);
    setMarketing((prev) => !prev);
    setAnalysis((prev) => !prev);
  }
};

+++아무래도 도메인과 밀접해서 코드만으로는 이해하는 데 어려움을 겪으실 것 같아 이미지를 추가했습니다.

체크박스 하나 혹은 두 개를 체크했을 때 모두 동의를 선택하게 된다면, 사용자가 기대하는 동작에 대해 세 가지 상태 모두를 true로 변경하는 것이 낫겠다 판단하였습니다. 그렇게 해서 나오게 된 코드입니다.

[regularPark]

첫글 써서 폭죽 터뜨려줌🎉🎉🎉🎉

[h1un]

질문

1. 모두 동의 버튼이 체크박스인가요? 단순 버튼이라면 css 를 변화를 위한 토글의 상태값을 저장하는 변수가 있나요?
2. 세 가지 상태 중 하나만 true인 상태에서 아래 함수를 실행시키면 세 가지 상태가 모두 true값으로 변경 에서 '세가지 상태 중 하나만 true' 라는 조건이 꼭 들어가야하는건가요 ?

[regularPark]

1. useState 훅을 사용해 상태를 관리합니다.
2. 세 가지 중 하나라도라는 조건에 더 가깝습니다.

[h1un]

(🐣 리액트 입문자 : )
단순하게 생각했을때 버튼 상태를 const [isChecked, setIsChecked] = useState(false); 으로 관리한다는가정하에

const toggleAgreeAll = () => {
  const newValue = !isChecked;
  setIsChecked(newValue);
  setPrivacy(newValue);
  setMarketing(newValue);
  setAnalysis(newValue);
};

로 하면 되지 않을까 생각했어요.

2번 질문을 드린 이유는 결론적으로 그냥 [모두 동의]를 클릭했을때 전부 동의로 바뀌면 될것같은데
꼭 하나라도 라는 조건이 있어야하는 이유가 있나요 ?

[Wisesaturn]

if (![privacy, marketing, analysis].every((item) => item)) {

뭔가 이 조건 자체가 정말 자스스럽네요. 🤣🤣🤣
비즈니스 로직은 모르지만, 저 3개의 값이 개별로 왔다갔다 한다면
현재 조건 분기로 나누는 게 전 좋아보입니다!

저 if문을 바꾸어 보자면

const allAgreed = privacy || marketing || analysis;

혹은

const allAgreed = [privacy, marketing, analysis].some(Boolean);

로 변수로 뺀 다음에 if문을 돌려보는건 어떨까유?

[regularPark]

const allAgreed = privacy || marketing || analysis;

이게 평소에 쓰던 스타일이라 마음에 드는군요. 좋습니다

[KyuTae98]

오우! 반복되는거 같아 고치고 싶은데 고치기 애매한 코드군요!

저였어도 아마 정규님 처럼 작성했을거 같긴하지만 재한님의 의견을 보고

const allAgreed = privacy && marketing && analysis;

요런식으로 써서 every를 대체해도 괜찮지 않을까 생각합니당!

[bbearcookie]

다들 넘나 좋은 의견을 많이 올려주셔서..
저는 유사한 상태를 객체 형태로 하나의 state로 묶는 방법도 있으려나? 싶네요 😅

const [agreeied, setAgreeied] = useState({
    privacy: false,
    marketing: false,
    analysis: false,
});

[qhahd78]

오 저도 state 를 객체형식으로 묶어서 관리하는 건 어떨까 생각해봤습니다!

흔히 form 들어가는 여러 input 값을 관리할 때 객체로 묶어서 관리하기도 해서 (react hook form 도 그런 식으로 관리되기도 하고..) 객체로 하는 방법도 괜찮아 보입니다.