React 16의 class 대 className

React 16의 class 대 className

---

React 16이 속성을 DOM으로 전달할 수 있음을 확인했습니다. 따라서 className 대신 'class'를 사용할 수 있습니다.

이전 버전의 React와 하위 호환되는 것 외에도 클래스보다 className을 사용하는 것이 장점이 있는지 궁금합니다.

---

class자바 스크립트의 키워드이고 JSX는 자바 스크립트의 확장입니다. 즉 사용 반작용 왜 주요 이유 className대신을 class.

그 점에서 변한 것은 없습니다.

이것을 조금 더 확장하려면. 키워드 수단 토큰은 언어 구문에서 특별한 의미를 가지고있다. 예를 들면 다음과 같습니다.

class MyClass extends React.Class {

토큰 class은 다음 토큰이 식별자이고 다음은 클래스 선언임을 나타냅니다. Javascript 키워드 + 예약어를 참조하십시오 .

토큰이 키워드라는 사실은 일부 표현식에서 사용할 수 없음을 의미합니다.

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class = 'css';

// valid
var clazz = 'css';

// invalid!
props.class = 'css';

// valid
props['class'] = 'css';

문제 중 하나는 미래에 다른 문제가 발생하지 않을지 아무도 알 수 없다는 것입니다. 모든 프로그래밍 언어는 여전히 진화하고 class있으며 실제로 충돌하는 새로운 구문에서 사용될 수 있습니다.

에는 이러한 문제가 없습니다 className.

---

React 팀은 실제로 다가오는 미래 ( source ) class 대신 다음 으로 전환 할 것입니다 .className

• className→ class( # 4331 , 아래 # 13525 (주석) 참조). 이것은 수없이 제안되었습니다. 우리는 이미 React 16의 DOM 노드에 클래스를 전달하는 것을 허용하고 있습니다. 이것이 생성하는 혼란은 보호하려는 구문 제한의 가치가 없습니다.

전환하고 둘 다 지원하지 않는 이유는 무엇입니까?

경고없이 두 가지를 모두 지원하면 커뮤니티가 어느 것을 사용할지 분할됩니다. 클래스 prop을 받아들이는 npm의 각 구성 요소는 둘 다 전달해야합니다. 중간에 심지어 하나의 구성 요소가 하나 개의 소품을 연주하고 구현하지 않는 경우, 클래스는 분실 - 또는 당신과 함께 끝나는 위험이 class와 className그 충돌을 해결에 반응위한 방법으로, 서로 "의견이 맞지"아래에. 그래서 우리는 그것이 현상 유지보다 더 나쁠 것이라고 생각하고 이것을 피하고 싶습니다.

따라서 계속 지켜봐주십시오. 이것이 API가 기대하는 한
계속 사용할 것 className입니다.

---

이미 주어진 다른 좋은 답변들 위에 조금 더 빛을 비추기 위해 :

You'll notice that React uses className instead of the traditional DOM class. From the docs, "Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively."

http://buildwithreact.com/tutorial/jsx

Also, to quote zpao (a React contributor / facebook employee)

Our DOM components use (mostly) the JS API so we opted to use the JS properties (node.className, not node.class).

---

React docs recommend on using cannonical React attribute names rather than the conventional Javascript naming, so even when React allows attributes to be passed through to DOM, it will give you a warning.

From the docs:

Known attributes with a different canonical React name:

    <div tabindex="-1" />
    <div class="hi" />

React 15: Warns and ignores them.
React 16: Warns but converts values to strings and passes them through.
Note: always use the canonical React naming for all supported attributes.

---

Class versus className in reactJS Class is a reserved word or keyword in reactJS as much as function is in the javascript. That is why we use the word "className" to refer to the class.

---

as of june 2019, the process of changing className to class has been halted, it could be continued later

here is the post by facebook dev explain why

https://github.com/facebook/react/issues/13525

---

There is no real explanation by React team on this but one would presume it to be differentiated from reserved keyword "class" in Javascript since its introduction in ES2015+.

Even if you use "class" in element configuration while creating element, it won't throw any compilation/rendering error.

ReferenceURL : https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16