[React] React에서 Styling 하기/ HTML, CSS, JSX

다음과 같은 이미지를 만들어 보자!

1. 먼저 새로운 배열을 생성해보자.

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

2. 구역을 만들어 각각의 이름을 넣어주자.

🚨 CSS 를 작성하기 위해서는, { } 객체 형태로 내부도 key : "value",형태로 작성해준다.

return (
    <div style={{
      display: "flex",
      padding: "100px",
      gap: "12px",
  }}
  >
      <div style={{
      padding: "10px",
      border: "1px solid green",
      border-radius: "10px",
      width: "100px",
      height: "100px",
      margin: "10px",
      display: "flex",
      align-items: "center",
      justify-content: "center",
     }}
   >감자</div>
      <div className="component-style">고구마</div>
      <div className="component-style">오이</div>
      <div className="component-style">가지</div>
      <div className="component-style">옥수수</div>
    </div>
  );

3. 아래 style이 모두 겹치기 때문에, style을 따로 변수로 지정해준다.

function App() {
const style = {
    display: "flex",
    padding: "100px",
    gap: "12px",
}

const style-app = {
      padding: "10px",
      border: "1px solid green",
      border-radius: "10px",
      width: "100px",
      height: "100px",
      margin: "10px",
      display: "flex",
      align-items: "center",
      justify-content: "center",
    }
}

이렇게 css 부분을 따로 선언을 해주고, 아래 부분에서는 style={변수 이름}을 작성해주면, 보다 더 깔끔하게 html 부분을 작성할 수 있다.

return (
    <div style={style} >
      <div style={style-app}>감자</div>
      <div style={style-app}>고구마</div>
      <div style={style-app}>오이</div>
      <div style={style-app}>가지</div>
      <div style={style-app}>옥수수</div>
    </div>
  );

✅ JS 파일과 CSS 파일을 구분하여 작성하기!

CSS를 같은 App.js 파일에 작성을 하게 될 경우, 파일 내에 너무 많은 양의 코드를 작성하게 되므로, 이 부분을 따로 App.css 파일에 작성하는 방법도 있다!

CSS 파일을 작성하기 위해서는 class를 만들어야 한다! JS에서와 달리, JSX 에서는 className으로 class를 생성한다.

• js 파일

  import React from "react"; 
  import "./App.css"; // css 파일을 반드시 불러와야 한다! 
  function App() { 
  const testArr = ["감자", "고구마", "오이", "가지", "옥수수"]; 
  return ( // 보다 더 깔끔한 html을 작성할 수 있다. 
  <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;`

• CSS 파일

  .app-style { 
  display: flex; 
  padding: 100px; 
  gap: 12px; 
  } 
  .component-style { 
  padding: 10px; 
  border: 1px solid green; 
  border-radius: 10px; 
  width: 100px; 
  height: 100px; 
  margin: 10px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  }`