[React] 동빈나 React 이론 - 2강 / 코드펜(Codepen)을 이용한 React 개발환경 구축하기

코드펜(Codepen)

로컬이 아닌, 웹 상에서 빠르고 효과적으로 코드를 테스트 할 수 있는 사이트

 

코드펜에서 React 사용하는 법

먼저 파일을 만들고(New Pen) 다음 단계를 따라가면 된다.

1. setting 클릭
2. JS 클릭
3. JavaScript Preprocessor에서 'Babel' 선택
4. Add External Scripts/Pens 에서 'react', 'react-dom' 검색하여 추가
5. Save & Close 버튼 클릭

 

• babel: jsx 등의 기능을 이용할 수 있음
• react: component 같은 기능 처리하도록 도와주는 라이브러리
• react-dom: 웹 문서의 dom에 렌더링을 진행하는 라이브러리

 

• 기본적으로 웹 문서는 dom을 갖고 있다.
  > dom에 접근해서 다양한 웹사이트 화면을 그리거나 구상할 수 있는거다.
• React는 HTML 파일을 작성할 일이 별로 없다.
  > 대부분 JS 코드를 이용해 생성하기 때문

 

코드

 

분석

class HelloReact extends React.Component{
  render(){
    return(
      <h1>Hello React!</h1>
    );
  }
}

• class를 이용하여 웹사이트를 객체지향적으로 접근할 수 있다.
  • extends로 *상속을 받음
  • React.Component는 일종의 클래스 형태를 갖고 있는 것으로, React가 갖고 있는 기본적인 기능을 모두 포함하고 있음
    ex) 화면에 어떤 것들을 *렌더링
  • 기본적으로 React를 이용한다는 것은, 이러한 다양한 React 라이브러리를 상속 받아서 활용하는 것이라 이해하면 됨
• render(): 화면을 그리는 역할 수행

 

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

• 최종적으로 root 라는 위치에 Component를 그려야 한다.
  • ReactDOM 이용 - Component를 그려주는 역할을 수행, 즉 화면에 어떠한 내용을 실제로 그려주는 역할 수행
    XSS 같은 공격에 안전하다는 특징이 있다(이스케이핑 처리)

 

ReactDOM.render(<HelloReact/>, document.getElementById("root"));

• 첫번째 매개변수는 그리고자하는 Component, 두번째 매개변수는 웹 문서의 어디에 넣을 지(id)
• 우리가 어떤 도화지에 스티커를 붙여 전체 도화지를 만든다고 생각하면 된다 > root가 도화지, Component(요소)가 스티커

 

**상속: 어떤 라이브러리가 기존에 갖고 있던 기능을 물려 받는 것

**렌더링: 그린다. 화면을 구성한다. 화면을 그린다.