[React] 리액트 기초 1 - JSX 기초

 

 

HTML

 

 

<div id="root"></div>

<div id="name"></div>

<div id="function"></div>

<div id="greet"></div>

<div id="title"></div>

<div id="attr"></div>

<div id="compile"></div>

 

 

 

JS(Babel)

 

 

// -> JSX는 자바스크립트 안에서 엘리먼트를 그대로 쓸 수 있게 해 주는 기능.

// <br> 같이 단독으로 사용할 수 있는 태그는 반드시 <br /> 처럼 슬래쉬를 넣어줘야 함.

 

const element = <h1>Hello,<br />world!</h1>;

// var와 유사, 변수의 값을 할당하면 재할당이 불가능함.

      

ReactDOM.render(element, document.getElementById('root'));

// 'root' id를 가진 엘리먼트에 'element'를 렌더하겠다.

// 항상 ReactDOM을 통해 렌더링, 그리고 어디에 렌더링 할 지를 지정해 주어야 함.

 

 

 

 

const element_2 = <h1>Javascript Expression, {1+3} </h1>;

ReactDOM.render(element_2, document.getElementById('root'));

// JSX 안에서는 중괄호{}을 이용해 자바스크립트 표현식이 가능하다.

 

const name = "KimBangul";

const element_3 = <h1>Hello, {name}</h1>;

 

ReactDOM.render(element_3, document.getElementById('name'));

 

// 1. JSX는 자바스크립트 안에서 HTML을 편하게 쓸 수 있는 방법이다.

// 2. 자바스크립트적 요소를 사용하고자 할 때는 중괄호 사용. (중괄호 안에 변수도 사용 가능)

 

function add10(num){

  return num + 10;

}

 

const element_4 = <h1>함수 결과 : {add10(3)}</h1>;

ReactDOM.render(element_4 , document.getElementById('function'));

// 중괄호 안에 함수도 사용 가능.

 

function getGreeting(name){

  if (name){

    return <h1>Hello, {name}</h1>;

  }

  return <h2>Hello, stranger?</h2>;

}

 

ReactDOM.render(getGreeting(), document.getElementById('greet'));

// 매개변수 값을 입력하지 않으면 Hello, stranger? 출력

 

 

const element_5 =

      (

      <div>

        <h1>Main title</h1>

        <h2>Sub title</h2>

      </div>

      )

      ;

 

ReactDOM.render(element_5, document.getElementById('title'));

 

// JSX에 값을 넣을 때 최상위 엘리먼트는 단 하나여야 함.

// const element = <h1>김방울/h1><h2>박방울</h2> 은 불가능(div 등 상위 엘리먼트로 묶어 주면 중첩 가능)

// <div><h1>Main title</h1><h2>Sub title</h2></div> 처럼 한 줄에 쓰는 게 아니라 여러 줄에 나눠 쓰려면 괄호() 안에 써야 함.

 

 

function handleClickEvent(event){

  alert(event.target.textContent);

}

// 클릭 시 팝업창 발생

 

const element_6 = <h1 className="title" onClick={handleClickEvent}>React DOM은 HTML attribute 이름과는 다르게 property이름에 camelCase를 사용한다.</h1>;

ReactDOM.render(element_6 , document.getElementById('attr'));

 

// 본래 HTML에서는 class="", onclick="" 등으로 사용했으나 JSX에서는 단어와 단어 사이가 이어질 때, 첫 글자는 대문자로 표시(CamelCase)해주어야 함.

// onclick 시 실행될 함수도 큰따옴표가 아니라 중괄호 안에 표시해주어야 함.

 

 

function ClickEvent(){

  alart('click!');

}

 

const element_7 = React.createElement(

  'h1',

  {className: 'title', onClick: handleClickEvent },

  'JSX는 Babel에 의해서 React.createElement로 컴파일 된다!'

);

 

ReactDOM.render(element_7, document.getElementById('compile'));