[React] ⑦ HTML5 Attribute 비교

728x90

2021.09.27

58번째 포스팅

입사 203일차.

React는 HTML5에서 사용하는 Attribute들 중, 기능은 같지만 이름이 다르거나 혹은 그 반대의 경우들이 있다.오늘은 그 종류들을 기록해보려고 한다.

0. 출처

① ZeroCho님의 무료 인프런강좌 (링크)

② Do it! 리액트 프로그래밍 정석 (eBook)

③ 초보자를 위한 Node.js 200제 (오프라인 구매)

④ 리액트 공식홈페이지 (링크)

1. attribute명 (HTML5 > React : 설명)

① tabindex > tabIndex : tab키를 눌렀을때 focusing되는 태그의 순서를 지정

② class > className : React에는 class가 다른 예약어로 사용되기 때문에 className으로 변경됨 (클래스형 컴포넌트)

③ for > htmlFor : React에서 for는 반복문의 예약어로 사용됨

④ 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이름이 바뀐 Attribute</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="main_wrap"></div>
    <script type="text/babel">
        const ChkAttributes = () => {
            return (
                <>
                    <div>
                        <input type="text" className="idInput" tabIndex={1} />
                        <input type="textarea" tabIndex={2} />
                        <input type="number" htmlFor="for에서 변경" tabIndex={3} />
                    </div>
                </>
            );
        }
    </script>
    <script type="text/babel">
        ReactDOM.render(<ChkAttributes/>, document.querySelector('#main_wrap'));
    </script>
</body>
</html>
Colored by Color Scripter

cs

2. 작성방법 (HTML5 > React : 설명)

① readonly > readOnly : readOnly = {false}

② disabled : disabled = {false}

③ checked : checked = {false}

④ required : required = {false}

⑤ autofocus : autofocus = {false}

⑥ 위의 attribute들에 false를 주고 싶다면, JS형태로 작성해주어야 한다 (문자열 형식으로는 불가) / true는 생략가능

3. CamelCase (HTML5 > React : 설명)

① React에서 사용하는 html Attribute들은 모두 CamelCase로 작성해야한다.

② 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute 확인</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="main_wrap"></div>
    <script type="text/babel">
        const ChkAttributes = () => {
            let borderColorBlack = {borderColor: '#000'}
 
            return (
                <>
                    <div style={borderColorBlack}> // ① 변수 선언 후 JS형태로 작성
                        <input type="number" style={{fontSize: '20px'}} />  // ② style 태그에 직접작성
                        <button type="submit">입력</button>
                    </div>
                </>
            );
        }
    </script>
    <script type="text/babel">
        ReactDOM.render(<ChkAttributes/>, document.querySelector('#main_wrap'));
    </script>
</body>
</html>
Colored by Color Scripter

cs

③ style attribute를 JS형태로 작성해주면 더 빠르게 렌더링된다.

④ style attribute를 직접 작성하는 건 권장되지 않는 방법이다.

⑤ style attribute안에 css를 직접 작성할때는 반드시 {{ attribute }} 형태로 작성해주어야 한다.

다음포스팅의 주제

[React] ⑧ WebPack 설치 및 개발환경구성 (1)

2021.10.04 59번째 포스팅 입사 210일차. 개발에는 늘 진입방지턱이 존재한다. 대표적으로는 C의 포인터, React의 WebPack 등이 있다. 오늘은 React의 진입방지턱 역할을 하는 WebPack의 설치법 및 개발환경

limreus.tistory.com

728x90

'프론트엔드 > 리액트' 카테고리의 다른 글

[React] ⑧ WebPack 설치 및 개발환경구성 (2) (0)	2021.11.21
[React] ⑧ WebPack 설치 및 개발환경구성 (1) (0)	2021.10.04
[React] ⑥ HooksAPI (0)	2021.09.22
[React] ⑤ React.Fragment, this, ref (0)	2021.09.15
[React] ④ <input>태그에 값 입력하기 (1)	2021.08.16