[React] DropDown

2차로 진행했던 프로젝트에서 상세페이지를 맡았었다. 상세페이지를 같이 담당했던 팀원 분의 드롭박스 기능을 나도 공부해보고 싶어, 따로 기록을 남긴다.
출처 : GREAM, 프론트엔드 지홍님

🧐 세 개의 드롭박스를 관리하기

1. 무슨 버튼을 눌렀는지 구별해야 한다
2. 다른 버튼을 누르는 순간, 원래 열려 있던 버튼의 boolean 값이 false 로 변해야 한다
3. 열려있는 드롭박스의 버튼을 다시 눌렀을 때 해당 버튼의 boolean 값도 false 로 변해야 한다

📝 Code

  const [toggle, setToggle] = useState(false);
  const [toggleId, setToggleId] = useState(0);

  const showDropdown = id => {
    id === toggleId ? setToggle(!toggle) : setToggle(false);
    setToggleId(id);
  };

👉🏻 showDropdown 은 onClick 이벤트에 들어갈 함수
👉🏻 id 를 인자로 넘겨서 id 가 toggleId 와 같으면 setToggle(!toggle), 같지 않으면 state 값을 false 로 (드롭박스가 보여지지 않게)

 return (
    <Box>
      {BUY_INFO?.map(info => {
        const showContent = info.id === toggleId && toggle;
        return (
          <DropdownHey key={info.id}>
            <DropDown
              name={info.name}
              onClick={() => showDropdown(info.id)}
              show={showContent}
            >
              <span>{info.korName}</span>
            </DropDown>
            <Content show={showContent}>{info.content}</Content>
          </DropdownHey>

👉🏻 map() method 를 이용해 드롭박스 데이터를 뿌려주는데, 함수 안에서 showContent 변수를 선언하고 클릭한 info.korName 의 id 가 toggleId 와 일치하면 toggle 은 true 값을 갖는다 => show

const DropDown = styled.div`
  display: flex;
  justify-content: flex-start;
  position: relative;
  padding: 18px 0 17px 0;
  height: 60px;
  font-size: ${({ theme }) => theme.fontsize.fontSize2};
  border: 0;
  border-bottom: 1px solid ${({ show }) => (show ? '#222222' : '#F2F2F2')};
  border-radius: 0;
  color: ${({ theme }) => theme.palette.black};

  span {
    font-weight: ${({ show }) => (show ? '800' : '600')};
  }
`;

const Content = styled.div`
  padding: 15px 0;
  line-height: 2;
  border-bottom: 0.2px solid ${({ theme }) => theme.palette.lightGrey2};
  display: ${({ show }) => (show ? 'block' : 'none')};
`;

🌟 props 로 넘겨준 show 가 true 면 display: block 을, false 면 display: none 이 되도록 styled-component 내에서 구조분해할당 하여 조건을 걸어 바꿔준다