React 활용하기(JSX)

(3) JSX

react 를 사용하기 전에 미리 알아둘 문법이 있습니다.

JSX : JavaScript Expression

자바스크립트에 적용되는 문법입니다.

1) 반드시 화면에 데이터를 출력할 때에는 하나의 태그를 사용해야합니다.

2) 변수를 선언하고 화면에 변수를 출력할 때에는

형식)
변수선언 : let 변수명 = 값
출력 : {{변수명}}

3) 이벤트 처리함수는 클래스 내부에 작성해서 호출합니다.

형식) {this.호출할함수명()}

// ex)  기존  HTML  에서 사용하던 방식
 <button onclick={this.sayHello()}>Click me</button>

• 3-1) 함수호출 시 () 를 붙이지 않는다.
  : 이벤트를 발생시키지 않았는데도 호출되기 때문에

• 3-2) 함수명앞에 this를 붙여야 된다.
  : {this.속성명}

• 3-3) onclick을 사용하지 않고, onClick 을 사용합니다.
  : on이벤트종류(첫글자는 반드시 대문자를 사용할것)

4) StyleSheet 적용하기

웹 문서니까 당연히 css 로 디자인을 합니다.
적용방법도 사실 크게 다르지 않아요,

• 4-1) 스타일시트가 복잡해지면 별도의 css파일을 만들어서 import로 불러옵니다.

• 4-2) 스타일시트가 적용이 된 camelCase Object를 만들어서 적용할 수도 있습니다.

  형식)
  let 객체명={속성명:속성값~}

4) 주석 달기

주석은 아무곳에나 달게되면 (특히 render() 내부) 렌더링이 되지 않습니다.

return 밖에서 주석을 표시
ex)
return(

    <div> {/*
        return 안쪽에 주석을 사용하기위해서 { }로 묶어주면 된다.
    */}

)

5) 주석 달기

주석은 아무곳에나 달게되면 (특히 render() 내부) 렌더링이 되지 않습니다.

return 밖에서 주석을 표시

6) 제어문 사용하기 (if)

리엑트에서는 if문을 사용할 수 없습니다.

render() 함수 내부에 삼항연산자를 이용해서 작성해주세요.

앞서 배운 모든 것들을 사용해봅시다 / 경로를 확인해주세요

(추가적으로 들어가는 문법/이론이 있습니다.)
: myApp > src > component > App.js

//import React from 'react';//React.Component클래스
import React,{Component} from 'react'; // 다른 방식으로 불러옵니다.
import '../App.css'; //import '경로포함 불러올 css파일명'
//클래스를 통해서 컴포넌트를 불러오는 방법입니다. 
//class App extends React.Component{ 
class App extends Component{ // 컴포넌트로 활용하기 위해  Component 클래스를 상속받습니다.
//이벤트처리 함수를 선언합니다.
sayHello(){
  alert("이벤트함수 호출됨")
}
//화면에 디자인한 내용을 출력해주는 render()
render(){
  let text="React변수 사용" /* {출력변수명} {{변수명}}(vue.js) */
  let pStyle={ // 스타일을 적용하기 위한 Object
    color:'aqua',
    backgroundColor:'black'
  }

(추가) 태그 중첩을 표현하는 코딩방식이 있습니다. (이건 귀찮아요)

형식)
태그생성(DOM)(1.생성할 태그명,2.props전달값,3.태그의 내용)

   // 태그를 생성해봅니다. 
   const root=React.createElement('div',{}, 
        React.createElement('h1',{},"Hello, world!",
             React.createElement('a',{href: 'mailto:mark@ifelse.io'},
               React.createElement('h1',{},"React In Action"),
               React.createElement('em',{},"..and now it really is!")
      	     )
    	)
    )
    const root2=(<div>
            <h1> Hello,World
    	        <a href="mailto:mark@ifelse.io">
                	<h1>React In Action</h1>
                	<em>..and now it really is!</em>
                </a>
            </h1>
        </div>
  )
    /*
      return 밖에서 주석을 표시
    */
    return( // 실제로  export 되어서 표시되는 부분 (렌더링)
           <div> {/*
                   return 안쪽에 주석을 사용하기위해서 { }로 묶어주면 됩니다.
                */}
             <h1 class="App">리액트구조 및 환경설정부분,{text}</h1>
             <h1 className="test">반드시 하나의 태그를 사용할것</h1>
             <button onClick={this.sayHello}>클릭</button>
              <p style={pStyle}>{1==1?'True':'False'}</p>
             <hr />
             {root} // 변수를 출력
             <hr />
             {root2} // 변수를 출력
           </div>)//html문서포함해서 문자열포함
  }
}
//export default 외부에 내보낼 클래스명; 
export default App;