[React] Vue 에는 없는 React 만의 표현들

 

1) JSX안에서는 항상 최상위 태그는 1개여야만 한다. 불필요한 DOM 노드를 만들기 싫다면

function App() {
  return (
    <main>
      <React.Fragment> // 혹은 단축표현인 <> </>을 써도 된다
        <Post />
        <Post />
        <Post />
        <Post />
      </ React.Fragment>
    </main>
  );
}

 

 

2) JSX 에서 inline 스타일로  css 를 줄 때 속성명이 text-align 처럼 하이픈(  -  ) 이 있다면 textAlign 캐멀케이스로 바꿀 것. 자바스크립트에서 변수, 속성은 케밥 표기법을 쓸 수 없기 때문이다

하지만 inline 스타일 css 는 쓰지 말 것

function Post(props) {
  return (
  <div style={{ border: '1px solid black', padding: '10px', textAlign: 'left' }}>
    <p>{props.author}</p>
    <p>{props.content}</p>
  </div>
  );
}

export default Post;

 

 

3) JSX 안에서는 class 가 아닌 className 으로 해서 class 명을 부여한다

( class는 JavaScript의 예약어일 뿐만 아니라, 리액트에서 css를 매칭할 때 class 가 아닌 'className' 으로 매칭하기 때문)

 

 

4) JSX 안에서는 label 태그 안의 속성 for 를 htmlFor 로 쓴다

      <p>
        <label htmlFor="body">Text</label>
        <textarea id="body" required rows={3} />
      </p>