[React] JSX와 React 초기 사용 방법

1. 코드펜 접속

2. 설정 - JavaScript Preprocessor - Bable(ES6로 작성된 코드를 ES5로 변환을 해준다.)선택

react (컴포넌트 담당)와 react-dom 추가 ( 리엑트 15버젼 이상부터는 이 두개를 추가)

* 브라우저의 호환성 때문에 변환하는 것이다.

3. 클래스를 선언 후에 사용해야 한다.

4. 상속사용가능 (부모 호출시에는 super. 을 써준다.)

 

JSX

- html같지만 자바스크립트로 작성된다.

- xml같은 문법을 native JavaScript 문법으로 변환해준다.

- 모든 JSX 코드는 container element(태그)안에 포함되어야 한다. (왜? 에러발생)

- let(블록범위) == var(함수단위) 와 비슷하다. 한번선언시 재선언 불가능

- let으로 선언한 변수는 {}안에서 출력 가능하다.

- 무조건 태그를 닫아줘야 한다. 안그럼 오류남

- 두개 이상의 엘리먼트는 하나의 엘리먼트 혹은 Fragment로 감싸줘야 한다.

- var의 경우 스코프가 함수단위라서 변수가 유효한경우는 해당 메소드 안이다.

- let과 const의 경우 스코프가 블록단위이다.

var	const	let
함수안에서 하나의 변수로만 사용	자바의 final	유동적인 값 (블록단위)

* ES6문법에서는 let과 const를 사용한다.

 

{/* 이곳에 주석을 입력하면 된다. */}

- 주석이 태그 안에 작성이 되어야 한다. 그외에 위치하면 에러가 발생한다.

 

props ***

- 컴포넌트 내부의 변하지 않는 데이터를 처리할때 사용한다.

- 유지보수를 위해서 설정하는 것

- Codelab.propTypes <--타입 지정

- Codelab.defaultProps <--기본값 지정

- 부모 컴포넌트가 자식에게 값을 전달할 때 사용된다.

 

state

- 컴포넌트에서 유동적인 데이터를 보여준다.

- 초기값 설정이 필수이다. this.state={}

- 값을 수정할 때엔 this.setState({}), 렌더링 후에는 this.state는 사용 불가

 

코드샌드박스 사이트도 추천!

 

import React를 해줘야 React사용가능!

Component를 만드는 방식

1. class

2. 함수

render() 메소드 안에는 JSX형태의 코드로 리턴을 해줘야 한다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>안녕하세요 리액트</h1>
      </div>
    );
  }
}

export default App;

 

삼항연산자

render() {
    const name='siri';
    return (
      <div>
       {
        name==='siri'&&<div>시리다</div>
       }
      </div>
    );
  }
--------------------------------------------  
<div>
    {
      1 + 1 === 2 
        ? (<div>맞아요!</div>)
        : (<div>틀려요!</div>)
    }
</div>

 

조건문

 const value=2;
    return (
      <div>
       {
        (function(){
         // (()=>{
          if(value===1) return <div>1이다</div>
          if(value===2) return <div>2이다</div>
          if(value===3) return <div>3이다</div>
          return <div>없다</div>
        })()
       }
      </div>
    );

https://react-anyone.vlpt.us/03.html