[5주차] 리액트입문: component styling, 중복 컴포넌트 처리

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;