1. styled-components란 무엇이고 왜 쓰는가?
1. styled-components는 하나의 라이브러리이다.
2.컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생긴다
- class 만들어 놓은걸 까먹고 중복해서 만드는경우
- 갑자기 다른 이상한 컴포넌트에 원하지않느 스타일이 적용되는경우
- CSS 파일이 너무 길어져서 수정이 어려운 경우
•
물론 호불호가 갈릴 수 있다
2. 설치방법
1.
터미널에 yarn add styled-components 혹은 npm install styled-components
2.
사용하고 싶은 컴포넌트 맨위에 무언가를 import 해와야한다
a.
import styled from 'styled-components'
3. 문법
•
let 컴포넌트명 = styled.원하는태그` css ` ;
3. Sample Code
import React ,{useState} from 'react';
import { useHistory, useParams } from 'react-router-dom';
import styled from 'styled-components';
//styled 컴포넌트 이용한 스타일링
let 박스 = styled.div`
padding : 20px;
`;
//색깔만 다른 제목이 여러개가 필요하다면
let 제목 = styled.h4`
font-size : 25px;
color : ${ props => props.색상 }
`;
function Detail(props) {
let history = useHistory(); //뒤로가기 기능을 위헤서 react-router-dom v5이상, react v16.3 이상에서 가능 , history는 내 방문기록을 다 담은 object
let { id } = useParams();
/*
1. shoes라는 상품데이터들 안에 {id : 0 } 이런 영구번호가 있다. 그럼 현재 /:id 자리에 입력한 값과 영구번호가 같은 { 상품데이터 }를 찾아서 데이터바인딩 해주기
*/
let 찾은상품 = props.shoes.find(function(상품) {
return 상품.id == id;
});
return (
<div>
<div className="container">
<박스>
<제목 색상={'red'}>Detail</제목>
</박스>
<div className="row">
<div className="col-md-6">
<img src={"https://codingapple1.github.io/shop/shoes"+(찾은상품.id + 1)+".jpg"} width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{ 찾은상품.title}</h4>
<p>{ 찾은상품.content} </p>
<p>{ 찾은상품.price }</p>
<button className="btn btn-danger">주문하기</button>
<button className="btn btn-danger" onClick={ () => {
history.push('/');
} }>뒤로가기</button>
</div>
</div>
</div>
</div>
)
}
export default Detail;
JavaScript
복사
