카운터 앱 만들기, 스타일링 (Styling), refactoring

• + 1 버튼을 누를 때마다 숫자가 + 1 증가하고, - 1 버튼을 누를 때마다 숫자가 -1 감소하는 식으로 구현하기

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const onMinusButtonClick = () => {
    setNumber(number - 1);
  };

  const onPlusButtonClick = () => {
    setNumber(number + 1);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div>{number}</div>

      <div>
        <button onClick={onMinusButtonClick}>-1</button>
        <button onClick={onPlusButtonClick}>+1</button>
      </div>
    </div>
  );
};

export default App;

---

컴포넌트 스타일링하기

CSS를 사용해 위 사진과 같이 만들기

( 1 ) div에 필요 속성 모두 추가하고 각각 복붙

import React from "react";

const App = () => {
  return (
    <div
      style={{
        display: "flex",
        gap: "12px",
        padding: "50px",
      }}
    >
      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid green",
          borderRadius: "10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        감자
      </div>

      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid green",
          borderRadius: "10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        고구마
      </div>

      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid green",
          borderRadius: "10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        오이
      </div>

      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid green",
          borderRadius: "10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        가지
      </div>

      <div
        style={{
          width: "100px",
          height: "100px",
          border: "1px solid green",
          borderRadius: "10px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        옥수수
      </div>
    </div>
  );
};

export default App;

과도한 스크롤, 난잡함

기존 CSS 사용 시에도 class를 만들고 여러 곳에서 사용 했듯이 변수를 만들어서 정리해주기

import React from "react";

const App = () => {
  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  const bodyStyle = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  };

  return (
    <div style={bodyStyle}>
      <div style={squareStyle}>감자</div>

      <div style={squareStyle}>고구마</div>

      <div style={squareStyle}>오이</div>

      <div style={squareStyle}>가지</div>

      <div style={squareStyle}>옥수수</div>
    </div>
  );
};

export default App;

bodyStyle과 squareStyle로 변수를 만들어서 정리함

나름 정리 됐지만, 여전히 텍스트 내용만 다른 중복 div들이 많음

내용만 다른 텍스트들을 배열로 만들고 map 메소드를 사용하여 정리하기

import React from "react";

const App = () => {
  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };

  const bodyStyle = {
    display: "flex",
    gap: "12px",
    padding: "50px",
  };

  const vegetable = ["감자", "고구마", "오이", "가지", "옥수수"];

  return (
    <div style={bodyStyle}>
      {vegetable.map(function (vege) {
        return <div style={squareStyle}>{vege}</div>;
      })}
    </div>
  );
};

export default App;

텍스트들의 배열을 만들고, map 메소드를 돌려 코드량이 획기적으로 줄었다

---

React에서의 CSS 특징

- css는 객체 형태로 주기에 style { } 안에 { }를 넣고 속성을 적용

- 마찬가지로 객체 형태이기에 통상적으로 사용하던 ; 가 아닌 , 로 구분지음

- 기존의 케밥 케이스로 적힌 css속성들은 카멜 케이스로 이루어져 있다 border-radius => borderRadius