코드펜(Codepen)을 이용한 React 개발환경 구축하기

  코드펜(Codepen)은 프론트 엔드(Front-End) 개발에 있어서 매우 유용한 사이트입니다. 굳이 우리의 로컬 컴퓨터에 개발환경을 구축하지 않아도 빠르고 효과적으로 웹 사이트 상에서 소스코드를 작성하여 테스트 해 볼 수 있습니다.

  ▶ 코드펜 사이트: https://codepen.io/

  앞으로 작성할 다양한 프로젝트를 손쉽게 관리하기 위해서 가장 먼저 '회원가입'부터 진행해주도록 합시다. [Sign Up for Free] 버튼을 누르시면 회원가입 페이지로 이동합니다.

  저는 위와 같이 제 이메일 주소로 회원가입을 진행했습니다.

  회원가입 이후에는 메인 페이지로 이동해서 바로 프로젝트를 만들어서 코딩을 시작할 수 있습니다. 저는 생성(Create) 버튼을 눌러서 프로젝트를 만들어 보도록 하겠습니다.

  프로젝트를 만드실 때에는 [Pen]으로 만드시면 됩니다.

  저는 바로 제목을 바꾸어주었고, 간단한 HTML 소스코드를 작성하여 저장(Save) 해보았습니다. 소스코드를 수정하면 알아서 화면이 새로고침 되면서 정상적으로 동작하는 것을 확인할 수 있습니다.

  이제 리액트(React) 개발환경을 구축하기 위해 설정(Settings) 탭을 열어봅시다.

  기본적으로 리액트는 자바스크립트 라이브러리이므로 JavaScript 탭을 확인하시면 됩니다.

  바로 검색창에서 [react]와 [react-dom]을 검색하여 추가합니다.

  - React: 컴포넌트를 처리합니다.

  - React Dom: 웹 문서의 Dom에 렌더링을 진행합니다.

  추가를 해보시면 다음과 같이 성공적으로 CDN 경로를 불러옵니다.

  이어서 JSX 등의 기능을 이용하기 위해 바벨(Babel)로 설정합니다.

  일단 세팅이 완료되었다면 정상적으로 동작하는지 여부를 확인하기 위해서 Hello React예제를 만들어 보겠습니다. 다음과 같이 소스코드를 작성해주세요.

※ HTML 코드 ※

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

※ JavaScript 코드 ※

class HelloReact extends React.Component {

  render() {

    return (

      <h1>Hello React!</h1>

    );

  }

}

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

  이 때 컴포넌트는 자바스크립트 클래스 중 하나입니다. React.Component라는 이름으로 준비되어 있습니다. 기본적으로 리액트를 이용한다는 것은 이러한 다양한 리액트 라이브러리를 상속 받아서 활용하는 것이라고 이해하시면 됩니다. (자바스크립트 ES6 버전부터 클래스가 도입되었으며 일반적인 객체 지향 프로그래밍과 동일하게 클래스를 사용하시면 됩니다.)