[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>
);