JSX - 역할 / 장점 / 사용법

JSX

: JavaScript + Xml

: A Syntax eXtension to JavaScript  자바스크립트 확장 문법

 

         태그에 특화된 속성                 스타일과 관련된 속성                                                  이벤트 핸들러

         ~~~~~~~~~~~~~~~~~~~~   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    ~~~~~~~~~

<img src="/images/data/test.png" width="100" height="100" style="border: 1px solid red;" onclick="..." />

|      속성 ( attribute) => 태그를 처리하는 데 필요한 부가적인 정보

|

+ㅡ 태그(tag) => 시작 태그와 종료 태그로 구성 => 종료 태그가 생략되거나 자기 종료되는 경우가 있음

                            ~~~~~~~~~~~~~~~~                    ~~~~~~~~~~~~~            ~~~~~~~~~~~~~~

                             <div> ... </div>                              <input type ="text">         <img src="" />

                                       ~~

                                        내용(context) 

 

요소(element) = 태그 + 속성 + 컨텍스트

 

                            HTML => XML

                          ~~~~~~~~~~~~~~~~~~

const element = <h1> Hello, World (/h1>;    => JavaScript + XML = JSX

~~~~~~~~~~~~                                       ~

           |                                                     |

          +ㅡㅡㅡㅡㅡJavaScriptㅡㅡㅡㅡㅡ+  

 

 

역할

JSX는 내부적으로 XML/HTML 코드를 JavaScript로 변환하는 과정을 거침

                                                              ~~~~~~~~~~~~~

                                                               createElement() 함수가 담당

                                                                 React.createLement(

                                                                            type,        // 엘리먼트의 유형, HTML 태그 또는 다른 리액트 엘리먼트

                                                                            [props],           // 부모 엘리먼트에서 자식 엘리먼트에게 전달하는 값

                                                                            [...children]         // 현재 엘리먼트가 포함하고 있는 자식 엘리먼트

                                                                  )

순수 자바스크립트로 작성한 코드

funtion MyButton(){
	const [isClicked, setIsClicked ] = React.useState(false);
    
    return React.createElement(
    	'button'
        { onClick: () => setIsClicked(!isClicked) },
        isClicked ? "클릭되었습니다." : "클릭해주세요."
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(MyButton));

JSX 로 작성한 코드

function App(){
	const [isClicked, setIsClicked] = useState(false);
    
    return (
    	<button onClick={()=> setIsClicked(!isClicked)}>
        {isClicked ? "클릭되었습니다." : "클릭해주세요."
        </button>
    );
}

const root = ReactDOM.createRoot(Document.getElemnetById('roor'));
root.render(<App />);

장점

코드가 간결해진다.

가독성이 향상되고 유지보수성이 좋아진다.

 보안성이 향상된다. => xss 공격을 방어할 수 있음

 

사용법

1) 반드시 부모 요소 하나로 감싸야 한다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
    <h1>리액트 앱</h1>	⇐ Adjacent JSX elements must be wrapped in an enclosing tag. 
  );				   Did you want a JSX fragment <>...</>?	=> 오류 발생
}

export default App;

1. <div> 태그로 감싸는 방법

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>					⇐ 루트 엘리먼트를 추가
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </div>
  );
}

export default App;

2. Fragment 컴포넌트를 이용

import logo from './logo.svg';
import './App.css';
import { Fragment } from 'react';

function App() {
  return (
    <Fragment>						⇐ 불필요하게 태그가 추가되는 것을 방지
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </Fragment>
  );
}

export default App;

3. Fragment 를 축약 방식으로 사용

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <>		// Fragement를 축약 방식으로 사용
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
      </div>
      <h1>리액트 앱</h1> 
    </>
  );
}

export default App;

2) JSX 안에서는 자바스크립트의 표현식을 {}로 감싸서 작성

function App() {
  const name = '홍길동';
  const age = 23;

  return (
    <>
      <h1>안녕, {name}</h1>      
      <h2>내년에 나이는 {age+1}입니다.</h2>
    </>
  );
}

export default App;

 

3)  JSX 내부에서는 자바스크립트의 if문을 사용할 수 없으므로 , 삼항연산자를 사용해야함

 

삼항연산자?

조건식 ? 참인경우 : 거짓인경우

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      <h2>{ name === '홍길동' ? '환영합니다.' : '환영하지 않습니다.' }</h2>
    </>
  );
}

export default App;

4) 조건을 만족할 때만 내용을 보여줄 경우 => 조건부 렌더링

 1. 삼항연산자를 사용

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      <h2>{ name === '홍길동' ? '환영합니다.' : null }</h2>	⇐ 조건을 만족하지 않는 경우 null 반환
    </>									                     → 화면에 내용이 출력되지 않음
  );
}

export default App;

 2. && 연산자를 사용

function App() {
  const name = '홍길동';
  return (
    <>
      <h1>{name}님, </h1>      
      { name === '홍길동' && <h2>환영합니다.</h2> }
    </>
  );
}

export default App;

5) 함수에서 undefined를 반환하지 않도록 해야 함

function App() {
  const name = undefined;
  return name || 'undefined 입니다.';	⇐ || 연산자를 이용해서 undefined이 경우 사용할 기본값을 지정할 수 있음
}

export default App;

6) 인라인 스타일링

: DOM 요소에 스타일을 적용할 때는 객체 형태로 적용해야 하며, 스타일 이름은 카멜 표현식을 사용

function App() {
  const name = '리액트';
  const nameStyle = {
    backgroundColor: 'black', 
    color: 'yellow', 
    fontSize: 48,       // 단위를 생략하면 'px'이 기본
    padding: '16px'
  };
  return (
    <div style={nameStyle}>
      {name}
    </div>
  );
}

export default App;

7) CSS 클래스를 사용할 때 class가 아닌 className으로 설정

App.css

.react {
  background-color: black;
  color: yellow;
  font-size: 48px;
  padding: 16px;
}

import './App.css';

function App() {
  const name = '리액트';
  return (
    <div className="react">
      {name}
    </div>
  );
}

export default App;

8) 모든 태그는 반드시 닫는 태그를 사용해야 함

내용이 없는 태그는 self-closing 태그를 사용

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>

      <input type="text"></input>
      <input type="text" />
      <input type="text">   ⇐ Unterminated JSX contents. (닫는 태그를 사용하지 않으면 오류가 발생)
    </>
  );
}

export default App;

9) 주석(comment)

import './App.css';

function App() {
  // 인라인 주석
  const name = '리액트';    // 인라인 주석 
  /*
      블럭 단위 주석
  */

  return (
    <>
      { /*
          요렇게 해약 주석 처리가 가능 
        */ }
      { // 요렇게 하는 것도 가능
      }
      {
        // 물론 요렇게 하는 것도 가능        
      }
      { // 이렇게 하면 닫는 중괄호가 해석도지 않을 을 수 있음... }
      }
      <div className="react">{name}</div>
    </>
  );
}

export default App;