HTML to JSX 변환

HTML to JSX 변환 

React 는 일반 javaScript 문법이 아닌 JSX 문법을 사용합니다.

 

변환해주는 페이지  : magic.reactjs.net/htmltojsx.htm

1. JSX란

 

> 기존 XML을 허용하기 위한 Javascript 의 확장 문법입니다. ( JavaScript + Xml )

- Javascript : HTML 과 CSS로 만들어진 웹페이지를 동적으로 변경해 주는 언어입니다.
- XML : eXtensible Markup Language(확장될 수 있는 표시 언어) 고정된 태그를 가지고 있던 HTML 과 달리, 문서의 내용에 관련된 태그를 사용자가 정의 하여 확장 할 수 있도록 하여 내용 정보의 중요성을 강조합니다. 

> 개발자가 자바스크립트 내부에 마크업 코드를 작성 할 수 있게 합니다.

 

 

 

2. 사용방법

HTML to JSX: https://magic.reactjs.net/htmltojsx.htm

import React from 'react';

 

class App extends React.Component {

    render(){

 

        return (

                <h1>Hello World</h1>

        );

    }

}

 

export default App;

 

1. 컴포넌트에서 여러 Element 를 렌더링 해야 할 때, 그 element들을 필수적으로 container element안에 포함시켜야 합니다.

return ( 

<h1> Hello </h1>

<h2> Everyone </h2>

);

위는 변환 과정에 오류 가 발생합니다.
다음과 같이 div 를 wrapper로 사용하여하 합니다.

return ( 

<div>

<h1> Hello </h1>

<h2> Everyone </h2>

</div>

);

 

2. JavaScript Expression

 

＃ 표현 방법 : { } 로 wrapping 합니다.

render(){

let name = "bin"

return (

<div> 

<h1> Hello </h1>

<h2> I'm  </h2>

</div>

);

}

 

＃ 메서드 생성 및 사용

sayHello(){

alert("Hello there!");

}

 

render(){

return(

<div>

<h1> Hello </h1>

<button onClick=>Click Here</button>

</div>

)

}

 

＃ If Else 문 사용 불가

jsx 안에서 사용되는 javascript 표현에서는 if-Else 문이 사용 불가 합니다. 이에 대한 대안으로 삼항 조건 연산자(ternary)를 사용합니다.

 

 condition ? true : false 

 

render(){

var age = 25;

 

return(

<p>You { age > 19 ? "can" : "can't" } drink</p>

);

}

 

3. Inline Style

React 의 Inline Style 에서는 string 형식이 아니라, key 가 camelCase 인 Object 가 사용됩니다.

(ex) class -> className

 

render(){ let pStyle = { color: 'aqua', backgroundColor: 'black' //javascript >> background-color }; return ( <div> <h1> Hello </h1> <p style = ></p>

<div className="car">Hello World</div>

</div> ); }

4. 주석

JSX안에서 주석을 작성할 때엔 형식으로 작성됩니다.

 

{/* comments */}

5. Naming 

모든 React Component는 첫 문자를 대문자로 합니다.

 

 

 

https://velopert.com/867 를 참고하였습니다.