react

리액트 _2_리액트의 특징

새내기개발자 2020. 5. 9. 11:47

<리액트의 특징>

1. Virtual DOM

  - 리액트가 가상으로 dom을 관리하는 기능 

  - 실제와 가상을 비교한 뒤 변경된 부분만 적용 

 

2. JSX

JXS 문법 => html 데이터 만들 때 사용
    ===
    javascript +XML (문법사항은 XML을 따라감)
    1) 반드시 계층구조를 만든다.
       ex) <div>HELLO</div>
           <div>REACT</div>   ===> ERROR

           <div>
               <div>HELLO</div>
               <div>REACT</div>
           </div>             ===> OK

    2) html 태그는 반드시 소문자로 작성한다.
       ex) <Html> => function이나 class로 인식해버린다. (얘네 둘은 대문자로 작성해야함)

    3) 속성은 반드시 "" 안에 적는다.
       ex) <table width=100> ==> error
           <table width="100"> ==> ok

    4) 여는 태그 <a>, 닫는태그</a>, 빈 태그 <br/>가 명확하게 일치해야 한다.

<작성 구조>

class App extends Component{
    constructor() {       //선택 입력
        super();          // 멤버 변수 선언, 이벤트 등록시 사용
    }
    componentDidMount() { //선택 입력
                          //데이터를 서버에서 전송 받거나, JQUERY 연동시 사용
    }
    render() {            //필수 입력
                          //화면 출력하는 역할
       return(            
          <div>Hello</div>
        {/*return 안에서 주석은 꼭 이렇게 작성해야 한다.*/}
       )             
    }
}

예시)

return 안에 react.Fragment를 이용하여 가상으로 대칭을 만들어 줄 수 있다.

class App extends Component{
    constructor() {       //선택 입력
        super();          // 멤버 변수 선언, 이벤트 등록시 사용
    }
    componentDidMount() { //선택 입력
                          //데이터를 서버에서 전송 받거나, JQUERY 연동시 사용
    }
    render() {            //필수 입력
                          //화면 출력하는 역할
       return(
           <React.Fragment>
               <div>Hello</div>
               <div>React</div>
           </React.Fragment>
       )
    }
}

react.Fragment를 Fragment로 바꿀 수도 있다. 단, import해야한다. 

import React,{Component,Fragment} from 'react';
class App extends Component{
    constructor() {       //선택 입력
        super();          // 멤버 변수 선언, 이벤트 등록시 사용
    }
    componentDidMount() { //선택 입력
                          //데이터를 서버에서 전송 받거나, JQUERY 연동시 사용
    }
    render() {            //필수 입력
                          //화면 출력하는 역할
       return(
           <Fragment>
               <div>Hello</div>
               <div>React</div>
           </Fragment>
       )
    }
}

저장하면 화면에 hello랑 react만 적혀있다. 

반응형