component styling
인라인
return 안에 있는 각 태그들 속성으로 style={스타일이름} 으로 묶어 위에 쓴다.
import logo from './logo.svg';
import './App.css';
function App() {
const style = {
display: "flex",
alignItems: "center",
justifyContent : "center",
gap: "12px",
padding: "100px",
border: "1px solid red",
};
const squareStyle = {
display: "flex",
alignItems: "center",
justifyContent : "center",
width:"100px",
height:"100px",
border: "1px solid green",
borderRadius : "10px",
};
return (
<div style={style}>
<div style={squareStyle}>감자</div>
<div style={squareStyle}>고구마</div>
<div style={squareStyle}>오이</div>
<div style={squareStyle}>가지</div>
<div style={squareStyle}>옥수수</div>
</div>
);
}
export default App;
밖으로 빼서 스타일링
div 속성에 있는 style={style} 대신 className="스타일이름" 을 넣는다.
return (
<div className="app-style">
<div className="component-style">감자</div>
<div className="component-style">고구마</div>
<div className="component-style">오이</div>
<div className="component-style">가지</div>
<div className="component-style">옥수수</div>
</div>
);
App.js 상단에 App.css import 하기
import './App.css';
App.css 안에 원래 css 코드 방식으로 스타일링 해주기
// App.css
.app-style{
display : flex;
align-items: center;
justify-content : center;
gap: 12px;
padding: 100px;
border: 1px solid red;
}
.component-style {
display: flex;
align-items: center;
justify-content : center;
width:100px;
height:100px;
border: 1px solid green;
border-radius : 10px;
}
전체코드(아래클릭)
더보기
//App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="app-style">
<div className="component-style">감자</div>
<div className="component-style">고구마</div>
<div className="component-style">오이</div>
<div className="component-style">가지</div>
<div className="component-style">옥수수</div>
</div>
);
}
export default App;
// App.css
.app-style{
display : flex;
align-items: center;
justify-content : center;
gap: 12px;
padding: 100px;
border: 1px solid red;
}
.component-style {
display: flex;
align-items: center;
justify-content : center;
width:100px;
height:100px;
border: 1px solid green;
border-radius : 10px;
}
+반복/중복 컴포넌트 줄이기
map(); 함수로 컴포넌트 줄이기
1. 5가지의 요소들을 담는 배열 만들기
2. <div></div> 사이에 함수이기때문에 {}가 들어가고 그 안에 배열.map 함수 쓰기
return (
<div className="app-style">
{
testArr.map(function(item){
return <div className="component-style">{item}</div>
})
}
</div>
);
화살표 함수로 코드를 줄인 버전은 아래와 같다
return (
<div className="app-style">
{
testArr.map((item) => {
return <div className="component-style">{item}</div>;
})
}
</div>
);
만약, 오이가 아닌것만 뽑아서 카드로 나열해보이고 싶다면?
1. 5가지의 요소들을 담는 배열 만들기
2. filter(); 로 조건에 맞는 요소를 가진 배열 반환
3. 바로 map(); 을 써서 <div>{item}</div> 라는 틀에 아이템을 넣어 차곡차곡 쌓이게 하기
import logo from './logo.svg';
import './App.css';
function App() {
const testArr = ["감자", "고구마", "오이", "가지", "옥수수"];
return (
<div className="app-style">
{testArr.filter(function(item){
return item !== "오이";
})
.map(function(item){
return <div className="component-style">{item}</div>;
})}
</div>
);
}
export default App;
728x90
반응형
'부트캠프 개발일지 2023-2024 > React 리액트' 카테고리의 다른 글
[6주차] 리액트숙련: Styled Components (0) | 2023.11.08 |
---|---|
[5주차] 리액트입문: 반복되는 컴포넌트 처리하기2 (0) | 2023.11.02 |
[5주차] 리액트입문: 팀협업 시, 리액트파일 압축해서 보낼 때 (0) | 2023.11.02 |
[5주차] 리액트입문: 카운터 앱 만들기 (0) | 2023.11.02 |
[5주차] 리액트입문: component, rendering, browser rendering (1) | 2023.11.02 |