React 16에서의 class vs className

React 16에서의 class vs className

React 16에서는 속성을 DOM으로 전달할 수 있습니다.즉, className 대신 class를 사용할 수 있습니다.

이전 버전의 React와 하위 호환성이 있는 것 외에 클래스보다 className을 사용하는 것이 더 좋은 점이 있는지 궁금할 뿐입니다.

classjavascript JSX javascript 。바로 리액트가 리액트를 사용하는 입니다.classNameclass.

그 점에서는 아무것도 변하지 않았다.

이걸 좀 더 확대해서.키워드는 언어 구문에서 토큰이 특별한 의미를 갖는다는 것을 의미합니다.예를 들어 다음과 같습니다.

class MyClass extends React.Class {

" " "class는 다음 토큰이 식별자이고 그 뒤에 클래스 선언이 있음을 나타냅니다.Javascript Keywords + Reserved Words를 참조하십시오.

토큰이 키워드라는 것은 예를 들어 토큰을 사용할 수 없다는 것을 의미합니다.

// 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';

// valid
props.class = 'css';

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

문제 중 하나는 미래에 다른 문제가 발생하지 않을지 아무도 모른다는 것이다..class는 실제로 새로운 모순되는 구문에서 사용될 수 있습니다.

.className.

업데이트(2020년 8월):

Dan Abramov의 코멘트도 같은 맥락입니다.

을 사용하다이후 쓰기 기능 컴포넌트를 권장하는 Hooks를 출시하였습니다.소품으로 를 사용하는 하지만, 소품으로는 파괴를 사용할 수 { class, ... }구문 오류일 수 있기 때문입니다.따라서 전체적으로 이것이 실제로 끝까지 할 수 있을 만큼 인체공학적인지는 확실하지 않습니다.나중에 다시 만나거나 최소한 다음 기회에class경고도 하지 않고 사람들이 하고 싶은 대로 하게 놔두지 않는다.하지만 지금은 이 아이디어를 보류할 겁니다.

그러니까 안 돼

---

(2018년 8월)

팀은 React로 합니다.class className향후 (출처):

• className →(#4331, 아래 #13525(표준)도 참조).이것은 수없이 제안되어 왔다.이미 리액트 16의 DOM 노드로 클래스를 전송할 수 있습니다.이로 인해 발생하는 혼란은 보호하려는 구문 제한에 해당하지 않습니다.

왜 둘 다 지원하지 않고 바꾸나요?

경고 없이 둘 다 지원할 경우 커뮤니티는 어느 쪽을 사용할지 결정합니다.클래스 소품을 받아들이는 npm의 각 컴포넌트는 양쪽을 전송해야 합니다. 중 잘 , 「1」이 이 있습니다.그렇지 않으면 다음 문제가 발생할 위험이 있습니다.class ★★★★★★★★★★★★★★★★★」className서로 "불합치"하고 있으며, React가 충돌을 해결할 방법이 없습니다.그래서 우리는 그것이 현상보다 더 나쁘다고 생각하고 이것을 피하고 싶습니다.

이치노
저는 여전히 이 제품을 사용하는 것을 추천합니다.classNameAPI를 사용합니다.

다른 좋은 답변에 덧붙여, 조금 더 설명을 드리자면:

React는 기존의 DOM 클래스가 아닌 className을 사용합니다.문서에서 "JSX는 JavaScript이므로 클래스 및 for 등의 식별자는 XML 속성 이름으로 사용하지 마십시오.대신 React DOM 컴포넌트는 각각 className 및 htmlFor와 같은 DOM 속성 이름을 요구합니다."

http://buildwithreact.com/tutorial/jsx

또한 zpao(React 기고자/facebook 직원)를 인용합니다.

DOM 컴포넌트는 (대부분) JS API를 사용하기 때문에 JS 속성(node.class가 아닌 node.className)을 사용하도록 선택했습니다.

사용 cannonical React attribute기존 Javascript 이름이 아닌 이름이기 때문에 React가 속성을 DOM으로 전달할 수 있는 경우에도 경고를 보냅니다.

문서에서:

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.

2019년 6월 현재 className을 class로 변경하는 프로세스가 중지되어 있어 나중에 계속 진행할 수 있습니다.

facebook dev가 올린 글은 그 이유를 설명한다.

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

클래스 대 클래스 이름 응답JS 클래스는 리액션에서 예약된 단어 또는 키워드입니다.Javascript에 함수만큼 JS가 있습니다.그렇기 때문에 className이라는 단어를 사용하여 클래스를 나타냅니다.

이에 대한 React 팀의 실제 설명은 없지만 ES2015+에 도입된 이후 Javascript의 예약 키워드 "class"와 차별화되었다고 추측할 수 있다.

요소를 작성할 때 요소 구성에서 "class"를 사용하더라도 컴파일/렌더링 오류가 발생하지 않습니다.

React JS에서는 HTML이 아닌 JSX를 취급하고 있습니다.JSX는 기본 javascript DOM API! 클래스가 JS에서 예약된 것이 클래스를 사용하지 않고 className을 사용하는 주된 이유가 아니기 때문에 className을 사용하기를 원합니다.그 DOM API를 참조하고 있기 때문입니다.

우선 왜 그런지 생각해보자.className에 사용되었습니다.class애초에:

저는 최근에 Joel Denning의 React 컨퍼런스 비디오에서 CSS를 보았습니다.className사용되었습니다.class§ JavaScript 워워다다다 。나는 아직 완전히 이해하지는 못하지만 그의 의견에 동의하는 쪽으로 기울고 있다.다음은 그의 비디오와 제 의견 중 일부에 대한 설명입니다.

babel을 열고 다음 JSX 스니펫을 컴파일합니다.

const element = <div className="foo" />;
const element2 = <div class="foo" />;

Babel은 이를 다음과 같이 컴파일합니다.

var element = /*#__PURE__*/React.createElement("div", {
  className: "foo"
});
var element2 = /*#__PURE__*/React.createElement("div", {
  "class": "foo"
});

것은 이쪽classJavaScript의 "class"입니다.

HTML 요소에는 다음과 같은 속성이 있습니다.class된 후 되고 DOM 노드가 생성되어 "DOM" 등의 속성이 " 노드"입니다className속성과 속성의 차이점HTML에서 속성과 속성의 차이점은 무엇입니까?

HTML 속성 값에는 문자열만 사용할 수 있지만 DOM 속성에는 모든 값을 사용할 수 있습니다.클래스명을 취급할 때는, 이것이 어떻게 도움이 되는지는 잘 모르겠습니다만, 속성보다 DOM 속성을 갱신하는 것이, 확실히 명확합니다.

const div = document.createElement('div');

// Attribute update
div.setAttribute('class', 'foo');

// Property update
div.className = 'foo';

또, DOM 속성을 갱신하면, 클래스의 이름이 변경 가능한 상태라고 하는 생각에 적절히 관련짓는 재렌더가 트리거 됩니다.

을 초기화하기 위해서 Atribute DOM 의 경우,class와 "time"을 해 주세요.className되는 경우입니다.className이 됩니다.class...에 왜 알 수 .className이치노아마 의미론적인 속성이 갱신 가능한 값과 관련되어 있기 때문일 것입니다.★★★★★★★★★★…

스러워서 리액트를 허용하고 class(「」)className(질문에 기재된 바와 같이)https://github.com/facebook/react/issues/13525 에서 :

className → 클래스(#4331, 아래 #13525(표준)도 참조).이것은 수없이 제안되어 왔다.이미 리액트 16의 DOM 노드로 클래스를 전송할 수 있습니다.이로 인해 발생하는 혼란은 보호하려는 구문 제한에 해당하지 않습니다.우리는 이 변화를 그 자체로는 할 수 없지만, 그 위에 있는 모든 것과 결합하는 것은 타당합니다.컴포넌트 생태계가 처리하기가 매우 어려워지기 때문에 경고 없이 둘 다 허용할 수는 없습니다.각 컴포넌트는 양쪽을 올바르게 처리하는 방법을 배워야 하며, 서로 충돌할 위험이 있습니다.많은 컴포넌트가 className을 처리하기 때문에(예를 들어 className에 추가함으로써) 오류가 발생하기 쉽습니다.

제 생각에는 이 질문에 대한 구체적인 답은 없습니다., , 그 의미를 알 수 .className에 걸쳐서class나는 그것이 불필요하다고 말했을 것이다.

tldr; 당신의 질문에 답하기 위해, 저는 계속className 수 있습니다.class다른 대부분의 React 개발자들이 익숙한 접근 방식이기 때문에 코드를 쉽게 읽을 수 있습니다.

아직도 만족하지 못합니까?https://github.com/facebook/react/issues/13525#issuecomment-417818906 를 읽어 주세요.

문제는 당신이 보는 리액트 코드가 HTML이 아니라는 것입니다.사실 JSX는 javascript의 확장자(기본적으로 javascript + 조금 더 많은 코드)입니다.

Q: 사용할 수 있습니까?classHTML 속성: 'class'입니다.

이므로 javascript는할 수 .class그것은 특별한 javascript 단어이기 때문에 "savascript" (savascript는 당신이 사용할 수 있는 단어와 사용할 수 없는 단어를 규정합니다.)

class예약어인데 어떻게 수업을 쓰실 거예요? "비활성" 코드 jsx, 왜냐하면 그 단어는 '무조건' 단어이기 때문에 그렇게 사용할 수 없기 때문인가요?이를 회피하는 방법은 "class"가 아닌 "className"을 사용하는 것입니다.그러면 jsx는 javascript가 아닌 html 클래스 속성을 다루고 있음을 알 수 있습니다.class키워드를 지정합니다.

class 쓸 수 className이전 버전뿐만 아니라 리액트 16에서도 마찬가지입니다.

그 이유는 분명하지 않지만 아마도 일종의 관습일 것이다.

만약 이 설명이 당신에게 충분하지 않다면, 해시노드에 대한 제 기사를 보세요.길고 깊이 있는 글쓰기이기 때문에 당신의 궁금증은 충족될 것입니다.

div 코드 섹션 영역에서 클래스 대신 className을 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/46989454/class-vs-classname-in-react-16