React-JSX란?

=Javascript XML

JS랑 HTML이랑 짬뽕된 형태?

JSX 사용

<h1 className="question">Question</h1>

JSX 사용 X

React.DOM.h1({className: 'question'},'Questions');

React.createElement('h1',{className: 'question'},'Questions');

자식 노드

this.props.childeren

<Divider>Questions</Divider>

하드코딩한 Questions 텍스트를 this.props.cihlderen으로 바꾼 코드

var Divider=React.createClass({
	render: function(){
		return (
			<div className="divider">
				<h2>{this.props.children}</h2><hr/>
			</div>
		);
	}
});

 이렇게 jsx는 변수를 괄호 안에 감싸서 인식한다.

 

<Foo />

이 태그들은 같은 이름을 가진 변수들을 직접 참조한다. <Foo />와 같은 JSX 표현을 쓰려고 한다면 Foo가 반드시 스코프 내에 존재해야 한다.무조건 시작은 대문자로 해야 한다.

function Foo() {
  const [openDialog, setOpenDialog] = useState(false);
  const closeDialog = () => {
    setOpenDialog(false);
  };