[React] React.js 시작하기

Codepen 

웹에서 간편하게 HTML, CSS, Javascript 코드등을 구현하고 결과를 출력해주는 사이트. 

https://codepen.io/pen/

Codepen 설정

1.JavaScript -> JavaScript PreProcessor : Barbel 선택

2.Quick-add 에서 React, React-DOM을 추가해주거나,

아래를 직접 넣어준다. 

https://unpkg.com/react@15/dist/react.js

https://unpkg.com/react-dom@15/dist/react-dom.js

3. Save

js(barbel) 에서 jsx 구현

class Codelab extends React.Component { // Codelab이라는 텍스트를 랜더링 하는 소스


  
  render(){
    return(
      <div>Codelab</div>
    );
  }
}
 
class App extends React.Component{ // 위에서 만든 컴포넌트를 다른 컴포넌트에서 사용할 수 있다.
  render(){
    return(
      <Codelab/>
    );
  }
}
 
ReactDOM.render(<App/>,document.getElementById("root")); 
// 위에서 만든 컴포넌트를 랜더링 한다. 
// 첫번째 인자는 랜더링할 jsx형태 코드임. App 컴포넌트를 랜더링 할것이므로 <App/>을 적어줌.
// 두번째 인자는 이 컴포넌트를 랜더링할 element

react jsx는 xml 같은 문법을 native JavaScript로 변환해준다. 괄호를 넣지 않아도 에러는 발생하지 않지만, 가독성을 위해 사용한다. 이 jsx는 babel을 통해서 작동하게된다.

render() : 모든 react 컴포넌트는 render 메소드가 있는데, 이 메소드는 컴포넌트가 어떻게 생길지 정의해줌.

ReactDOM : 실제 페이지에 jsx 형태 코드를 랜더링할 때 사용됨.

HTML 구현

<div id="root"></div>

결과

아래에 랜더링 결과인  Codelab이라는 문자를 찍는다.

JSX

1. Nested Element

컴포넌트에서 여러 Element를 랜더링할 때에는 반드시 Container element안에 포함시켜주어야 한다. 

/* Error */
render(){
    return (
        <h1>Hi</h1>
        <h2>I am Error</h2>
    )
}
 
/* Normal */
render(){
    return(
        <div>
            <h1>Hi</h1>
            <h2>I am Error</h2>
        </div>
    )
}

2. Javascript Expression

JSX 안에서 JavaScript를 표현할때에는 {}로 wrapping한다.

참고) let ?? 

javascript에서 변수 선언시 var를 사용했다면 ES6 에서는 let을 사용한다. 

위에서 구현한 소스에서 let을 사용하여 문자를 찍어보자 

class Codelab extends React.Component {
  
  render(){
    let text = "Hi I am codelab";
    return(
      <div>{text}</div>
    );
  }
}
 
class App extends React.Component{
  render(){
    return(
      <Codelab/>
    );
  }
}
 
ReactDOM.render(<App/>,document.getElementById("root"));

3. Inline Style

jsx안에서 style을 설정할 때에는 key가 camelCase인 객체가 사용된다.

아래 예시를 보면 background-color라고 쓰면 안되고 backgroundColor 라고 써야함.

class Codelab extends React.Component {
  
  render(){
    let text = "Hi I am codelab";
    let style = {
      //background-color
      backgroundColor:'aqua'
    };
    return(
      <div style={style}>{text}</div>
    );
  }
}
 
class App extends React.Component{
  render(){
    return(
      <Codelab/>
    );
  }
}
 
ReactDOM.render(<App/>,document.getElementById("root"));
 

4. Comments

주석 작성시 {/* ... */} 형태로 작성해야 한다.

그리고 Container element 안에 주석이 작성 되어야 한다.

아래 예시를 보면 <div> 안에 주석이 있는데, 이 주석이 <div> 위나, </div> 아래로 들어갈 경우 에러를 발생시킨다.

render(){
return(
        <div>
            {/* This is your Comment */}
        </div>
        
    );
}

이 포스팅은 [React.js] 강좌 (React&Express 를 이용한 웹 어플리케이션 개발하기) 2-2편 : jsx를 기반으로 작성하였습니다.