Accordion Menu

맨땅헤딩! 2023. 5. 10. 09:53

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

- 현상

template 코드의 Accordion1과 Accordion2는 id 별로 각각 다르게 CSS가 적용되어있었지만 해당 CSS를 Accordion Component에 포함 시켰더니 아래와 같은 현상이 발생했다.

// template
#accordion1,
#accordion2 {
  width: 300px;
  margin: 20px 0;
}

// React
// Styled Comoponent
const Container = styled.div`
  width: 300px;
  margin: 20px 0;

  background: #fff;
  border-radius: 5px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
`;

// template
<body>
  <h1 class="title">Accordion</h1>
  <div class="container">
    <div id="accordion1"></div>
    <div id="accordion2"></div>
	</div>
</body

// React
<>
  <Title />
  <Container>
    <Accordion />
    <Accordion showMultiple={true} />
  </Container>
</>

- 발견

각각의 Accordion Component마다 isOpen에 따라 결정되므로 Accordion Component를 만들 때 template의 #accordion1의 CSS 내용을 따로 만들어 감싸줘야 한다.

const Wrapper = styled.div`
  width: 300px;
  margin: 20px 0;
`;

const Container = styled.div`
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12);
`;

<Wrapper>
  <Container>
		...
  </Container>
</Wrapper>

- 배운점

주어진 CSS를 분별해서 styled component 를 적절하게 잘 구성 해야 함을 배웠다.

- 선언

컴포넌트의 크기에 따라 결정되는 CSS가 있는 경우에는 styled Component를 사용할 때 주의해야겠다.