전체선택 버튼

내용

• 전체선택 클릭시 게시판 체크박스가 모두 선택되고 다시 클릭시 전체해제됨
• 1페이지 전세선택 클릭시 2페이지 넘어갔을때 전체해제 되어있어야 함

결과

코드 & 설명

//최상위 컴포넌트
import CheckBox from '../../components/CheckBox/CheckBox';
import History from '../../components/History/History';

const [allClick, setAllClick] = useState(false);

  const handleAllClick = () => {
    setAllClick(!allClick);
  };

//전체버튼 이미지
<Img
  onClick={handleAllClick}
  src="images/버튼(전체선택).png"
/>
    
//게시판 전체 컴포넌트 연결
//Check는 체크기능이 있는 게시판도 있고 아닌 게시판도 있어서 있을때마다 끼워쓰기위한 용도
//AllClick(전체선택하는 state)을 하위 컴포넌트에 넘겨준다  
//SetAllClick(state상태를 바꿔줌)을 하위 컴포넌트에 넘겨준다    
//연결되는 컴포넌트에 props를 내려줘야함    
 <History
   Check={CheckBox}
   AllClick={allClick}
   SetAllClick={setAllClick}
   headNumber="No."
   contents="내용"
   result="전송결과"
   transferNumber="전송갯수"
   days="전송일"
 />         

//History component, 게시판에 데이터넣는 컴포넌트
import List from './List';

const History = ({
  Check,
  headNumber,
  contents,
  transferNumber,
  days,
  AllClick,
  SetAllClick,
}) => {
  const [page, setPage] = useState(1); // 현재 페이지
  
//다음페이지 넘어갔을때 AllClick이 ture면 flase로 바꿔줌
    useEffect(() => {
    if (AllClick) {
      SetAllClick(false);
    }
  }, [page]);
  
         {posts.map(data => (
           //list컴포넌트 불러오기 & AllClick props 내려주기
          <List
            key={data.id}
            id={data.id}
            Check={Check}
            headNumber={data.id}
            contents={data.contents}
            transferNumber={data.transferNumber}
            days={data.days}
            AllClick={AllClick}
          />
        ))}
};

//list component, 게시판 만드는 컴포넌트
import CheckBox from '../CheckBox/CheckBox';

const List = ({
  Check,
  headNumber,
  contents,
  transferNumber,
  days,
  published,
  result,
  AllClick,
}) => {
  return (
   <CheckBox AllClick={AllClick} />
)};

//checkBox component, 체크박스 만든 컴포넌트
const CheckBox = ({ AllClick }) => {
  const [checkToggle, setCheckToggle] = useState(false);

  //checkToggle false <-> true
  const checkBox = () => {
    setCheckToggle(!checkToggle);
  };

//class 컴포넌트의 컨디마역할
//checkToggle을 setCheckToggle을 통해 AllClick로 바꿔줌
//[AllClick]의 값이 바뀔때마다 재렌더링 됨	
  useEffect(() => {
    setCheckToggle(AllClick);
  }, [AllClick]);

  return (
    <AgreeBox>
//이미지를 클릭하면 chechBox함수를 호출해서 checkToggle을 true로 바꿈
      <img onClick={checkBox} alt="checkBox" src="images/checkbox.png" />
      <Check
//활성화 돼 있는 체크를 클릭하면 chechBox함수를 호출해서 checkToggle을 false로 바꿈
        onClick={checkBox}
//check라는 변수에 checkToggle이 true면 스타일 컴포넌트에서 설정해 놓은 참일때 실행하는 ''를 실행
        check={checkToggle}
        alt="checkBoxInCheck"
        src="images/check.png"
      />
    </AgreeBox>
  );
};

//style-component
const Check = styled.img`
  position: absolute;
//props로 받은 check가 참이면 ""(=block) false면 none
  display: ${props => (props.check ? '""' : 'none;')};
`;

수정한 코드

수정전

• 최상위 컴포넌트에서 AllClick이 true로 바뀌고 계속 true로 하위에 넘겨줘서 다음페이지를 넘어가도 전체선택이 되어 있었다

수정후

• page가 바뀔때마다 update를 해줘서 AllClick이 true 이면 false로 바꿔주는 조건문 로직을 useEffect에 추가한다
• 최상위가 아닌 페이지네이션이 있는 컴포넌트에서 로직을 추가한다

//AllClick과 SetAllClick은 props로 받음
  const [page, setPage] = useState(1); // 현재 페이지

  useEffect(() => {
    if (AllClick) {
      SetAllClick(false);
    }
  }, [page]);

내생각

처음엔 해당 페이지에 있는 게시물 수 만큼 체크이미지를 map으로 나타내게 하는 구현을 생각하고 하루종일 머리를 굴렸다.
구현도 안되고, 실행도 안되고, 에러뜨고, 구글링도 잘 안나와서 애를 먹었는데
나라사랑 동기사랑. 어렵사리 동기에게 물어보니 페이지를 넘겨도 계속 true로 넘어가기 때문이 아닐까 라는 도움을 줬다.
정답(?)이었다. 코드 4줄 추가하는데 하루가 걸렸다.
나는 왜 state라는 생각을 못했을까 자책과 함께 반성을 했다.
이번 기회에 state공부를 좀더 확실히 짚고 넘어가야겠다는 다짐과 함께 블로그를 마친다.