ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [React.js] JSX(Syntax extension for JS)
    Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 23. 23:44
    반응형

    🤷 React.js 사용하는 이유

    • [빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive.

    • [간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.

    • [대용량에 유리] React is scalable. Large programs that display a lot of changing data are where React performs best.

    • [유연함] React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential. There’s room to explore.

    • [범용성] React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.


    📒 JSX : syntax extension for javascript

    • JSX는 자바스크립트 expression 취급. 변수에 저장되어, 배열 / 객체 / 함수 응용가능.
    • JSX 안에 HTML처럼 작성가능. id/class 지정하거나, inline CSS 통해서 속성을 부여하는 기능 등.   
    • 하나의 변수에 다중태그를 wrap하는 JSX도 가능. (단, 괄호로 묶어야 함. 2개 이상의 태그는 안되며 1개의 부모태그로 wrap 해야함.)

     

    - ReactDOM.render(): JSX 렌더링을 위한 라이브러리 및 메소드

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // Write code here:
    ReactDOM.render(<h1>Render me!</h1>, document.getElementById('app'))

    * 사용법: render('표현하려는 내용', ... , '내용을 포함할 컨테이너'). 표현하려는 내용은 JSX 뿐만 아니라 변수도 사용가능.

    const myList = (
      <ul>
        <li>macdonald</li>
        <li>burgerking</li>
      </ul>
    );
    
    ReactDOM.render(myList, document.getElementById('app'))

     

    render()의 강점은, 바뀐 DOM 부분만 수정을 한다. Virtual DOM, 가상DOM을 수정한 뒤 이전DOM과 비교하여 변경된 부분만 수정.

    관련 article: www.codecademy.com/articles/react-virtual-dom

     

     

    - JSX 심화문법

    1) className: JS에서는 class 기능을 제공하므로, class는 className=""로 명명해야 한다.

    //wrong JSX
    const wrongClass = <div class="hi">hi</div>;
    
    //right JSX
    const rightClass = <div className="hi">hi</div>;

     

    2) self-closing tag: <img />, <br />과 같이 태그쌍을 쓰지 않는 경우, HTML은 상관없었으나 JSX는 닫기(/) 반드시 해야한다.

    //wrong JSX
    const wrongBr = hi<br>hello
    
    //right JSX
    const rightBr = hi<br />hello

     

    3) Javascript형 작성({중괄호}): JSX구문 내에서 Javascript처럼 작성하고자 할 때 사용하는 방법.

    const wrongPlus = ReactDOM.render(<h1>2+3</h1>, document.getElementById('app'));
    // 2+3
    
    const rightPlus = ReactDOM.render(<h1>{2+3}</h1>, document.getElementById('app'));
    // 5

     

    • {중괄호} 코드는 Javascript도 JSX도 아님. 비유하자면 //인용문 처럼 그 구간만 JS로 취급하는 JSX 내용인 것. 
    • {중괄호}는 JS 구간으로 기존에 선언한 변수를 가져올 수 있다. (Array[index], Object.key 역시 가능)
    const ment = 'What would happen?';
    
    ReactDOM.render(<h1>{ment}</h1>, document.getElementById('app'));
    // What would happen?
    • 선언한 함수도 HTML Event Listner 등으로 활용할 수 있다.
    function myFunc() {
      alert('JSX was clicked!')
    };
    
    const image = <img src="~.jpg" onClick="{myFunc}" />;
    
    ReactDOM.render(image, document.getElementById('image'));
    // when image is clicked, alert message will be displayed.

     

    4) if-else 조건문: JSX 내에서 if-else문 사용이 불가하다. 밖에 if문을 쓰거나, 안에서 삼항연산자 쓰는 등 아래 주요방법을 숙지하자!

     

    • if문에 JSX 작성
    function coinToss() {
      return Math.random() < 0.5 ? 'heads' : 'tails';
    }
    
    const pics = {
      kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
      doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
    };
    // 1. 변수 선언
    let img;
    
    // 2. if문에 따른 변수 JSX property 지정
    if (coinToss() === 'heads') {
      img = <img src={pics.kitty} />;
    }
    else {
      img = <img src={pics.doggy} />;
    }
    
    // 3. 변수로 렌더링
    ReactDOM.render(img, document.getElementById('app'));

     

    • 삼항연산자(The Ternary Operator) - x ? y : z
    const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />;
    // combine variables + if statements
    
    ReactDOM.render(img, document.getElementById('app'));

     

    • && 검증법 - true일때만 렌더링을 원하는 경우 사용.
    const tasty = (
      <ul>
        <li>Applesauce</li>
        { age > 15 && <li>Brussels Sprouts</li> }	// if age <= 15, nothing is rendered.. 
        { age > 20 && <li>Oysters</li> }
        { age > 25 && <li>Grappa</li> }
      </ul>
    );

     

    5) .map() 메소드를 활용한 렌더링

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    const people = ['Rowe', 'Prevost', 'Gare'];
    
    const peopleLis = people.map(person => <li>{person}</li>);
    
    ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'))
    
    // Rowe
    // Prevost
    // Gare

     

    6) key(for list) - id와 유사. React에서 추적이 필요한 <li>에 지정한다. (필요조건 참고)

    • The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.

    • A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

    <ul>
      <li key="li-01">Example1</li>
      <li key="li-02">Example2</li>
    </ul>

     

    7) createElement()

    import React from 'react';
    
    const beforeJSX = <div>i am div</div>;
    const afterJSX = React.createElement('div', null, 'i am div');

    .createElement(type, [props], [...children]) 문법을 참고하자.


    🤔 총평

    createElement()는 React.js에서 사용하는 Component의 일종이라고 한다. (메소드와 유사하다고 추정)

    다음 게시글에는 Component 공부내용을 정리하도록 하겠다.

    반응형

    'Front-End(Web) > React - 프레임워크(React, Next)' 카테고리의 다른 글

    [React.js] Lifecycle  (0) 2020.11.27
    [React.js] State  (0) 2020.11.26
    [React.js] Props  (0) 2020.11.26
    [React.js] Components Interact, Import/Export  (0) 2020.11.26
    [React.js] Component 기본  (0) 2020.11.24
Designed by Tistory.