Twilight

인라인 스타일

리액트에서 인라인 스타일은 객체형으로 쓰입니다. 프로퍼티 이름은 CSS 속성 이름으로, 프로퍼티의 CSS값은 CSS 속성 값으로 쓰입니다.

한가지 주의할 점은 -(대시)기호가 들어간 속성이름은 CamelCase로 작성해야합니다.

ex) boarder-radius -> boarderRadius

import diceImg from './assets/dice.png';

const style = {
  borderRadius: '50%',
  width: '120px',
  height: '120px',
};

function Dice() {
  return <img style={style} src={diceImg} alt="주사위 이미지" />;
}

export default App;

import해서 가져오기

import구문과 똑같이 쓰는대 from을 안쓰면 됩니다. 즉 전체파일을 불러오는 거죠.

import 'css파일경로'

클래스 네임 활용하기

CSS 파일에서 정의된 클레스 이름을 className prop에 넣어주면 됩니다. 이때 재사용성을 위해 부모로부터 받아오는 것이 좋습니다.

import diceImg from './assets/dice.png';
import './Dice.css';

function Dice({ className = '' }) {
  const classNames = `Dice ${className}`;
  return <img className={classNames} src={diceImg} alt="주사위 이미지" />;
}

export default App;

자바스크립트 확장 문법이다

사용 시 주의점

• 속성명은 카멜케이스(Camel Case)로 적어야 한다. ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 단, 예외적으로 비표준 속성(data-* 속성)은 카멜케이스가 아니라 HTML 문법 그대로 작성해야 한다.

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <button onClick= ... >클릭!</button>
);

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    상태 변경: 
    <button className="btn" data-status="대기중">대기중</button>
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>
);

• 자바스크립트 예약어와 같은 속성명으로 사용이 불가능하다 ex) for, class x -> htmlFor, className in JSX

React 공식문서 - 어트리뷰트차이

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <form>
    <label htmlFor="name">이름</label>
    <input id="name" className="name-input" type="text" />
  </form>
);

• 반드시 하나의 요소로 묶기 - Fragement or 빈 태그(<></>) (빈 태그를 더 많이 사용함)

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <> // 혹은 <Fragement> </>
    <p>안녕</p>
    <p>리액트!</p>
  </>
);

• 자바스크립트 표현식을 넣을 땐 중괄호{} 사용

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png'

function handleClick(e) {
  alert('곧 도착합니다!');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>
);

Chrome에 react developer tools를 치고 들어가서 확장자를 추가한다.

추가하면 확장프로그램에 퍼즐모양의 버튼이 생기는데 거기서 설치가 잘되었는지 확인할 수 있다.

그리고 React로 구성된 사이트에서 개발자도구를 열면 Component와 profiler가 탭에 추가된 것을 볼 수 있습니다.