[React] Styling with JSX

아직 JSX 문법을 더 배우는 중!

JSX Attributes and Styling

Attribute는 CamelCase로 작성해야 한다.

JSX는 결국 JavaScript안에서 코드를 작성하는 것이기 때문에, JS의 Attribute 작성 룰을 따라야 한다.

HTML에 적용가능한 속성들은 ‘여기'에서 확인할 수 있는데, 사용시에는 꼭 CamelCase로 작성해야 사용할 수 있다.

Styling

똑같이 CSS를 이용해서 스타일링하는데, ClassName을 추가해 준 후, 똑같이 스타일링을 해주면 된다.

• <img src = {image +”text”}와 같은 식으로 값을 합칠 수도 있다.
• 자꾸 에러뜬거 처럼 보이는데 JSX는 자비 없다. HTML은 img태그 뒤에 “/”클로징 태그를 적용해 주지 않아도 어느 정도 자동으로 바꿔 주지만, JSX는 정확하게 작성해야 한다.
• img의 경우 alt값이 없으면 계속 오류뜬 것 처럼 보일 수 있다.

const image = "https://picsum.photos/200";

ReactDOM.render(
  <div>
    <h1 className="heading" contentEditable="true" spellCheck="false">
      My Favourite Foods
    </h1>
    <img src={image + "?blur"} alt="picture" />
  </div>,
  document.getElementById("root")
);

Inline Styling for React Elements

1. 여기는 자바스크립트 세상! 클래스를 붙이는게 아니라, inline 스타일링을 할꺼면 자바스크립트로 해줘야 한다. 그게 무슨소리?
2. 객체 형태와 객체의 key값들은 camelCase로 작성한다.
3. 그렇게 하면 이점은? 객체의 key값에 대한 value를 바꿀 수 있기 때문에 스타일링을 손쉽게 바꿀 수 있다.

import React from "react";
import ReactDOM from "react-dom";

const customStyle = {
  color: "red",
  fontSize: "20px",
  border: "1px solid black"
};

customStyle.color = "blue";

ReactDOM.render(
  <h1 style={customStyle}>Hello World!</h1>,
  document.getElementById("root")
);

// 다음과 같은 방식으로 아예 안에다가도 쓸 수 있기도 하다!
ReactDOM.render(
  <h1 style="color:red">Hello World!</h1>,
  document.getElementById("root")
);