Web_React #12

210825
Web_React #12

• JSX문법
  JS코드 안에 html태그를 사용하는 것을 보았는데 이를 JSX문법이라고 한다.
  다만 JS의 확장의 느낌이라 html문법을 그대로 사용할 수는 없다.

html에서 태그의 class를 지정하려면 <p class="hello">이와같이 사용하지만
JS내에서는 객체지향의 개념으로 클래스 정의를 위해 class라는 키워드를 사용하기 때문에 <p className="hello">와 같이 작성해야한다.

import ReactDOM from 'react-dom';

ReactDOM.render(
    <form>
        <label for="name">이름</label>
        <input id="name" type="text">
    </form>,
    document.getElementById(
        'root'
    )
);

label에서 사용하는 for또한 js에는 반복문에 쓰이는 for가 있다.

import ReactDOM from 'react-dom';

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

이렇게 htmlFor라고 수정해야한다.

그 외에 html에서 모두 소문자로 적었던 onblur, onfocus, onmousedown과 같은 eventhandler들은 JSX로 작성할 때 두번째 단어부터 첫글자를 대문자로 작성해야한다.
onBlur, onFocus, onMouseDown
위에서 htmlFor, className도 이런 방식이 적용된 것이다.

참고
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react