React: React 시작 (feat. babel, react-dom)

Babel

ES6의 문법을 ES5로 변환해주는 역할
ES6 문법을 아직 지원하지 않는 브라우저의 호환성을 위해 사용

react와 react-dom

react 파일은 컴포넌트를 담당하고,
react-dom 파일은 실제 DOM의 렌더링을 담당한다.
-> 실제 페이지에 jsx형태의 코드를 렌더링 할 때 사용
리액트 15 이후 버전부터 파일이 분리되었다.

component

컴포넌트는 자바스크립트의 클래스, 리액트 컴포넌트 클래스를 상속받아 사용
컴포넌트에서 다른 컴포넌트를 불러와 사용 가능

자바스크립트의 class

• 자바스크립트에서의 클래스는 ES6 부터 도입된 문법
• 기존 prototype 기반의 상속을 보다 명료하게 표현
  ** 새로운 객체 지향 모델은 아니다 (class기반이 아닌 문법만 가져온 것)

자바스크립트 class의 사용

생성자 메소드가 있다
생성자 내부에서는 메소드만 생성 가능

생성자 내부에서 변수(인스턴스의 프로퍼티) 사용
constructor(변수1, 변수2){
	this.변수1 = 변수1;
    this.변수2 = 변수2;
}
// 클래스는 오브젝트(객체)를 정의
// 변수에 담긴 오브젝트는 인스턴스(하나의 객체)

클래스는 사용전 먼저 선언해야함
클래스 내부에 static method 생성 가능 (스태틱 메소드는 인스턴스 생성 전 사용 가능)
클래스 상속 가능 (supur 키워드로 부모 클래스 호출 가능)

render()

모든 리액트의 컴포넌트는 render() 메소드를 가지고있다.
-> 컴포넌트가 어떻게 생길지 정의해줌

JSX

자바스크립트 코드에서 html 엘리먼트 정의 가능 (XML-like syntax)
JSX는 xml같은 문법을 native JavaScript로 변환
따옴표로 감싸지 않는다.
괄호는 생략 가능하지만 가독성을 위해 꼭 사용
ES6문법은 아니지만 babel에서 jsx-loader를 통해 변환해줌

JSX 사용 예

class Codelab extends React.Component{
  render(){
    return(
      <div>Codelab</div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab />
    );
  }
}

// react-dom에서 JSX형태의 코드를 페이지에 렌더링
// 인자1. 렌더링 할 JSX코드/컴포넌트, 인자2. 렌더링할 페이지의 html엘리먼트
ReactDOM.render(
  <App />, document.getElementById('root')
)

JSX의 특징

1. Nested Element: 여러 element를 렌더링 시 container element 내부에 작성해야 함

	render(){
    	return(
        	<>
            	<h1>Hi</h1>
                <h2>Yaeh</h2>
            </>
        )

2. JavaScript Expression: JSX문법 내부에 자바스크립트 사용
   -> {}로 wrapping하여 사용 가능

	render(){
		let text = 'Hi';
    	return(
        	<>
            	<h1>{text}</h1>
                <h2>Yaeh</h2>
            </>
        )

3. Inline Style: JSX 내부에 style 설정 시 key가 camelCase인 객체 사용

	render(){
    	let style = {
        	color: 'aqua',
            backgroundColor: 'black'
        };
		let text = 'Hi';
    	return(
        	<div style={style}>
            	<h1>{text}</h1>
                <h2>Yaeh</h2>
            </div>
        )

4. Comments: JSX 내부에 주석 형식은 {\/주석\/}, container element 내부에 작성

	render(){
    	<>
        	{/* 주석 작성 /*}
        </>
        )

JavaScipt 변수 선언 방식

scope: 변수 접근 범위 (유효 범위)
1. var: 재선언 가능 / 재할당 가능, 스코프 범위 - 함수
2. let: 재선언 불가 / 재할당 가능, 스코프 범위 - 블록
3. const: 재선언 불가 / 재할당 불가, 스코프 범위 - 블록

** 기본적으로 let 사용, 필요 시 var, const 사용