ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • JSX
    JavaScript/React 2022. 12. 15. 00:26

     

    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <h1>안녕리액트!!</h1>
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;

     

    # 코드 이해

    - 아래처럼 모듈을 불러와서 사용하는 것은 원래 브라우저(browser)에는 없던 기능. 이는 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능. 참고로 Node.js는 import가 아닌 require라는 구문으로 패키지를 불러 올 수 있다

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

    JSX 
    - JS에서 사용하는 HTML
    - JS의 확장 문법
    ** 주의 
    JSX를 사용할 때는 하나의 태그로 감싸주어야 한다. 
    주로 div태그로 감싸주는데 불필요한 div태그를 사용한면은 
    별로 보기 안 좋으므로 
    <Fragment> 태그로 감사준다 . 
    <Fragment> 태그는 <>로 축약해서 사용할 수 있다 

    ====================================
    ex)
    import ReactDOM from 'react-dom'; 

    ReactDOM.render(
        <p>좋은아침</p>
        <p>좋은저녁</p>, 
        document.getElementById('react')
    ); 

    위에처럼 하면은 오류남 
    아래처럼 하나의 태그, div태그로 감싸주면 됨 ! 
    import ReactDOM from 'react-dom'; 

    ReactDOM.render(
        <div>
            <p>좋은아침</p>
            <p>좋은저녁</p>, 
        </div>,
        document.getElementById('react')
    ); 

    불필요한 div태그를 남발할 수 있으므로 Fragmenet로 감싸주깅 

    import ReactDOM from 'react-dom'; 
    import { Fragment } from 'react'; 

    ReactDOM.render(
        <Fragment>
            <p>좋은아침</p>
            <p>좋은저녁</p>, 
        </Fragment>,
        document.getElementById('react')
    ); 

    Fragmenet태그를 아래처럼 태그 없이 할 수 있당 
    ReactDOM.render(
        <> 
            <p>좋은아침</p>
            <p>좋은저녁</p>, 
        </>,
        document.getElementById('react')
    ); 

    ===================================


    HTML를 JSX로 변환하기 
    변환전 


    <h1 id="title">가위바위보</h1>
    <button class="hand">가위</button>
    <button class="hand">바위</button>
    <button class="hand">보</button>
    ===================================
    변환후 

    import ReactDOM from 'react-dom'; 

    ReactDOM.render( 
        <>
            <h1 id='title'>가위바위보</h1>
            <button class='hand'>가위</button>
            <button class='hand'>바위</button>
            <button class='hand'>보</button>    
        </>
        , document.getElementById('root')
    ); 

    ======================================================================
    JSX에서 자바스크립트 구현하기 
    => 중괄호( {} ) 를 사용하면은 된다 

    예제1) 

    import ReactDOM from 'react-dom'; 

    const product = 'MacBook'; 

    ReactDOM.render(
        <h1>나만의 {product} 주문하기 </h1>,  
        document.getElementById('root') 

    ); 

    ======================================================================
    예제2) 
    method도 사용가능하다 


    import ReactDOM from 'react-dom'; 

    const product = 'MacBook'; 

    ReactDOM.render(
        <h1>나만의 {product.toUpperCase()} 주문하기 </h1>,  
        document.getElementById('root')  
    ); 

    ======================================================================
    예제3) 

    이미지도 추가해보기 


    import ReactDOM from 'react-dom'; 

    const product = 'MacBook'; 
    const model = 'Air'; 
    const item = product + model; 
    const imgUrl = 'https://upload.wikimedia.org/...'

    ReactDOM.render(
        <>
            <h1>나만의 {item} 주문하기</h1>, 
            <img src={imgUrl} alt="제품사진"></img>
            <button>확인</button>
        </>,
        document.getElementById('root') 
    );

    ======================================================================
    예제4) 
    이벤트 추가해보기 


    import ReactDOM from 'react-dom'; 

    const product = 'MacBook'; 
    const model = 'Air'; 
    const item = product + model; 
    const imgUrl = 'https://upload.wikimedia.org/...'

    function handleclick(){
        alert('곧 도착합니다!'); 
    }

    ReactDOM.render(
        <>
            <h1>나만의 {item} 주문하기</h1>, 
            <img src={imgUrl} alt="제품사진"></img>
            <button onClick={handleclick}>확인</button>
        </>,
        document.getElementById('root') 
    );
    ======================================================================
    #  JSX문법 

    1. 속성명은 카멜 케이스로 작성하기!
    onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex

    예를 들어

    ReactDOM.render(
        <button onClick>클릭!... </button>, 
        document.getElementById('root')
    );


    단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스(Camel Case)가 아니라 기존의 HTML 문법 그대로 작성하셔야 합니다.
    ReactDOM.render(
        <div>
            상태 변경: 
            <button className='btn' data-status='대기중'>대기중</button>
            <button className='btn' data-status='진행중'>진행중</button>
            <button className='btn' data-status='완료'>완료</button> 
        </div>, 
        document.getElementById('root')
    );

    3. 반드시 하나의 요소로 감싸기 - Fragment



    import ReactDOM from 'react-dom';



    ReactDOM.render(
        <>
            <p>안녕</p>
            <p>리액트</p>     
        </>, 
        document.getElementById('root')
    ); 



    2. 자바스크립트 예약어와 같은 속성명은 사용할 수 없다!
    JSX 문법도 결국은 자바스크립트 문법이기 때문에,  for나 class처럼 자바스크립트의 문법에 해당하는 예약어와 똑같은 이름의 속성명은 사용할 수 없습니다

    ex) 


    그래서 HTML의 for의 경우에는 자바스크립트의 반복문 키워드 for와 겹치기 때문에 htmlFor로, HTML의 class 속성도 자바스크립트의 클래스 키워드 class와 겹치기 때문에 className으로 작성

    ReactDOM.render(
        <form>
            <label htmlFor="name">이름</label>
            <input id="name" className="name-input" type="text"></input>  
        </form>, 
        document.getElementById('root')
    );





    4. 자바스크립트 표현식 넣기



    'JavaScript > React' 카테고리의 다른 글

    State  (1) 2022.12.23
    이벤트(Event)  (0) 2022.12.17
    프라퍼티(Props)  (0) 2022.12.17
    컴포넌트(component)  (0) 2022.12.16
    리액트시작하기  (0) 2022.12.14

    댓글

Designed by Tistory.