리액트를 시작해봅시다.

리액트를  배워봅시다.

---

리액트는 페이스북에서 만든 UI 라이브러리입니다. 데이터가 바뀌었을 때만 인식해서 바뀐 부분만 처리해준다면 얼마나 간편하고 빨라질까요? 그리고 라이브러리이기때문에 여러 기술과 함께 쓸 수 있습니다. 리액트를 배우면서 많은 개념들을 만나게 됩니다. 같이 쉬운 예제를 통해서 하나하나씩 배워보도록 하겠습니다.

리액트 설치하기

create-react-app이라는 것이 있습니다.

create-react-app github 바로가기

보통 cra라고 표현하는데요. 이것을 이용하면 귀찮은 것들 없이 간단하게 리액트 환경을 만들어줍니다. 해당 모듈을 다운로드 받으려면 npm을 다운로드 하셔야 합니다. npm은 node.js를 다운받으면 자동으로 다운받아집니다. 

node.js 다운로드 받으러 가기

해당 링크를 접속하면 보이는 화면입니다.

LTS라고 적힌 것을 다운받아주세요.

그리고 npm과 똑같은 역할을 하는 yarn도 다운받아야 합니다.

yarn 다운로드 받으러 가기

링크를 클릭하면 보이는 화면입니다.

모듈 관리 프로그램들을 다운로드 했으면 이제 cra를 설치해 보도록 하겠습니다. 

yarn global add create-react-app

global이라는 명령어를 붙이면 전역으로 설치하게 됩니다. add는 설치 명령어 입니다. 해당 명령어를 실행한 후 다운로드가 완료되면 npx 명령어를 통해 cra를 실행하면 됩니다.

npx create-react-app my-app

npx는 노드 버전이 일정 버전 이상이면 자동으로 다운로드 되어지니 위에 링크를 타고 들어가셔 받으셨다면 그냥 실행하면 됩니다. my-app 부분은 같이 만들 프로그램의 이름입니다. 다르게 적어주셔도 상관없습니다. 저는 profile-creator라고 적고 실행했습니다. 

설치가 완료되면 해당 화면이 보입니다.

현재 디렉토리에서 "cd 디렉토리명"을 하면 해당 디렉토리로 이동합니다. 일단 화면에서 알려주는 것처럼 cd "생성한디렉토리"를 입력해주세요. 해당 디렉토리에서 "yarn start"라는 명령어를 입력하면 브라우저 창이 열립니다.

yarn start 명령어 후 보여지는 화면입니다.

만들고 있는 프로그램을 실행할 때는 yarn start, 종료할 때는 ctrl + c를 눌러누시면 됩니다. 이제 cra를 통해 자동으로 설치된 파일을 보도록 하겠습니다.

사용하시는 에디터로 켜주세요.

우선은 불필요한 파일을 지우고, 리액트에 관한 설명은 다음 포스팅에서 이어가도록 하겠습니다. src/logo.svg와 App.test.js, README.md 파일을 지워주세요. 그리고 App.js에서 logo.svg를 import하는 부분도 지워주시면 됩니다.

파일을 삭제한 후 화면입니다.

그리고 App 클래스 안에 render 메소드가 보이시나요? 메소드가 리턴하는 부분에서 <header>부터 </p>까지 부분을 지워주세요. 그리고 src폴더에 profile.js 파일과 profile.css 파일을 만들어주세요.

import React from 'react';
import './profile.css';

function Profile(){
  return (
    <h1>프로필</h1>
  )
}

export default Profile;

profile.js 파일에 들어가야할 소스코드입니다. 

profile.js 파일을 import해주시고, 우리가 생성한 컴포넌트들을 사용해보세요. <Profile />형태로 사용하시면 됩니다.

잘 따라오셨다면 위와 같은 화면이 됩니다.

profile.js에서 생성된 태그가 app.js에서 보여지고 있습니다. 다음 포스팅에서 계속 이어서 설명하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.