리액트 공부 day1 - JSX

리액트는 복잡한 문제를 풀기위한 기술이다.

리액트는 웹 초급자를 위한 기술은 아니라고 하니, facebook이 복잡한 문제를 어떻게 풀었는지를

알아본다는 생각으로 공부를 시작해보겠다.

 

JSX는 자바스크립트 구문에서 HTML엘리먼트를 편하게 쓸 수 있는 방법이다.

필자는 코드펜으로 간단하게 실습중이다. 

codepen에 가입후 어려움없이 바로 실습할 수 있어서 좋았다.

처음에 설정값을 변경해줘야하니 이 부분은 꼭 해주길 바란다.

 

설정사항

1.코드펜 pen Settings > JS > JavascriptPreProcessor > Babel 설정

2.                                         > Add External Scripts/pen > 주소 추가(cdnjs 홈페이지에서 링크복사)

https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js

 

이제 JSX 특징에 대해서 알아보겠다.  

 

1. JavaScript적인 요소를 끼어넣고 싶을 때 {} 안에 쓰면된다. 

    {add10(3)}

 

HTML

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

JS

function add10(num){
  return num + 10;
}

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

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

출력값 : 함수결과 : 13

 

2. 표현식에 자바스크립트 변수명을 {} 안에 입력하면 변수명으로 치환이 되어 나온다.

 

3. ReactDOM.render(JSX요소(또는 JSX요소를 리턴하는 함수), ...); 

function getGreeting(name) {
  if(name) {
    return <h1>hello, {name}</h1>
  }
    return <h1>hello, stranger?</h1>
}

ReactDOM.render(getGreeting('gomigomi'), document.getElementById("root"));

출력값 :  hello, gomigomi

 

4. 하나의 엘리먼트가 여러개의 자식을 둘 수 있다.(중첩이 가능하단 얘기) 

    단, 최상위 엘리먼트가 자식엘리먼트를 감싸줘야한다. 

    아래 <div>가 최상위 엘리먼트이다.

const element = (
  <div>
    <h1>Main title</h1>
    <h2>Sub title</h2>
  </div>
);

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

  단, 한줄로 작성했을때는 대괄호를 빼도 무관하다.

 

5. JSX에서 속성을 쓸 때는 캐멀케이스로 작성한다.   엄밀히 말하면 HTML이 아니기 때문에 rule을 지켜준다. 

기존 HTML에서는  <h1 className="title" onclick="handleClickEvent(e);"> 와 같은 형식으로 작성했을거다.

 JSX에서 쓰는 rule로 따라주자.

 

JSX 표현식 (   onClick={함수명}   )

 <h1 className="title" onClick={handleClickEvent}>

 

6. JSX는 Babel에 의해서 React.createElement로 컴파일된다. 우리가 쓰는 JSX가 어떻게 컴파일되는지를 알 수 있다.

function handleClickEvent() {
  alert('click');
}

const element = React.createElement(
  'h1',
  { className: 'title', onClick: handleClickEvent },
  'JSX는 Babel에 의해서 React.createElement로 컴파일된다.'
);

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