class vs className

class vs className

This lesson will cover more advanced JSX. You’ll learn some powerful tricks, and some common errors to avoid.

Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. Probably the most frequent of these involves the word class.

In HTML, it’s common to use class as an attribute name:

<h1 class="big">Hey</h1>

In JSX, you can’t use the word class! You have to use className instead:

 

<h1 className="big">Hey</h1>

This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.

When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

 

---

이 레슨은 더 향상된 JSX를 다룰 것이다. 

당신은 강력한 트릭들과 피해야할 몇몇의 일반적인 오류들을 배울 것이다. 

JSX 문법은 대부분 HTML과 같다. 그러나 조심해야할 미묘한 차이점이 있다. 

아마도 이것들 중 가장 빈번한 것은 단어 class 와 관련이 있을 것이다.

 

html에서 이것은 attribute 이름으로써 class를 사용하는게 일반적이다. 

 

<h1 class="big">Hey</h1>

 

JSX에서 당신은 class 단어를 사용할 수 없다! 당신은 대신에 className을 사용해야만 한다. 

 

<h1 className="big">Hey</h1>

JSX가 자바스크립트로 번역되고, 클래스는 자바스크립트에서 예약된 단어(?)이기 때문이다.

 

jsx가 렌더될 때, jsx className 속성은 자동적으로 class 속성으로써 렌더된다. 

 

 

---

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

// Write code here:
const myDiv = (<div className="big">I AM A BIG DIV</div>);  
//우리가 div 클래스네임을 big으로 주어서 div글자는 매우 크게 화면에 출력된다.

ReactDOM.render(myDiv, document.getElementById("app"));

 

 

 

출처 : 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-classname-class