[Netflix 클론코딩 회고] 아코디언 스타일링
링크
stackblitz 실습 링크
넷플릭스 클론 코딩 repo 링크
배경
넷플릭스 인트롤 페이지에 FQA 가 아코디언으로 구성되어있었다
react 아코디언으로 검색해보니 useRef 으로 선택된 상태인지 아닌지 하는 방법도 있었지만 나는 useRef 잘 모르고 뭔가 복잡해보였다
그래서 props와 useState를 사용하여 구현하였다!!
목표
- 클릭시
body내용 보이기 - 클릭시
+회전하기 - 내용에 따라
body height길이 다르게 하기
컴포넌트 구조
Acodion
├── AcodionWrapper
| | ├── Title
| | ├── Body
이슈
- 제목 click시 애니메이션 => 클래스
on으로 구분하기, useState 사용 -
+회전 => 클래스on으로 구분하기 , useState 사용 - body 길이에 따라 height가 달라짐 => props 로 넘겨주기로!
코드
<Acodion/>
const Acodion = () => {
return (
<>
{data.map((item) => {
const [on, setOn] = useState('');
const clickHandler = () => {
on === '' ? setOn('on') : setOn('');
};
return (
<AcodionWrapper>
<Title onClick={clickHandler}>
<p>{item.title}</p>
<button className={`${on}`}>+</button>
</Title>
<Body className={`${on}`} height={item.height}>
<div>{item.content}</div>
</Body>
</AcodionWrapper>
);
})}
</>
);
};
style.js
import styled from '@emotion/styled';
export const AcodionWrapper = styled.div`
width : 300px;
margin: 0 auto;
+ div{
margin : 5px auto;
}
`;
export const Title = styled.div`
height : 50px;
background-color: gray;
display :flex;
cursor: pointer;
+ div{
margin : 1px auto;
}
p{
margin-left : 10px;
}
button{
font-size : 20px;
border : 0;
outline:0;
background-color : #00000000;
margin-left: auto;
transition : all 500ms linear 0s;
}
button.on{
transform: rotate( 45deg );
}
`;
export const Body = styled.div`
height : 0;
overflow : hidden;
background-color: gray;
padding : 0 10px;
transition : all 500ms linear 0s;
&.on{
height :${(props) => props.height}px;
}
div{
margin :5px;
}
`;
props로 스타일 속성 넘겨줄때!
const data = [
{
...
height: <<숫자>>,
...
}
]
<컴포넌트 height ={data.height}/ >
export const 컴포넌트 = style.div`
height : ${props=> props.height}px;
`
숫자만 넘기고 style.js 에서 px 를 붙이는 것이 안전하다
만일 안된다면 컴포넌트에 잘 맞추어 넣었는지 살피는게 중요하다
(컴포넌트 이름 확인!!!)
학습목표
프레임워크와 라이브러리 차이점
03-5 연습 문제 풀기
댓글남기기