React 기본 : 클래스형 Component 정의하는 기본 작업순서 정리

▒ 클래스 Component생성을 위한 React 기본 환경설정 순서 

 

① React Project를 만들고자 하는 Project Directory를 만든다. 

 

② Project Directory로 이동하여 npm install을 한다.

    npm install -g create-react-app

 

③ Project Directory에 npm이 install되면 만들고자 하는 App directory 를 만든다.

    create-react-app 폴더명

    React를 사용하기 위한 필요 파일들을 생성하는 과정

    완료가 되면 해당 App directory로 이동 ( cd 명령어 이용)

    yarn start명령어로 로컬호스트에 접속

 

④ VS code 설정 (class component 기본 구성)

   

    ★ App.js 

 

        → function App함수를 class App extends Component로 바꾸기

        → import React를 하고 react로부터 Component 가져오기

        → 필요없는 import  삭제해도 무방 (logo 같은 것)

 

 

      ★ public 폴더 index.html 

 

         → src 폴더의 index.js 로부터 Component 를 받아 실행되는 곳

 

       

index.html

 

index.js

       

 

      ★ README.md

 

         → 프로젝트의 설명을 기록하는 곳

       

    

 

⑤ Github 로그인 및 저장소 만들고 VS Code에서 Push 하기

     Github New Repository 생성

     VS Code Git 탭에서 수정된 내역 로컬저장하고 Message 적고 Commit 하기 

     Terminal 창에서 Push 하기 

    → 저장소의 주소를 원격지로 지정 git remote add origin 깃허브 저장소 주소 (이 작업은 최초 한번으로 적용)

    → Push 명령어 : git push --set-upstream origin master

 

 

⑥ 새로운 compoment 파일을 만든다면 (예를 들어 Customer.js)

    src 폴더에 폴더와 파일을 생성

    파일 기본 구성은 import로 시작 export default 콤포넌트명 으로 맺음 형태가 기본 

    중간에는 콤포넌트명을 정의

 

 

⑦ App.js 에서 Customer component 사용

    Customer component를 사용한다고 return(  ) 안에 정의 

    Customer component를 미리 작성한 폴더로 부터 import 한다는 내용 정의

 

 

 

    변수와 Props를 이용 "{   } 사용" 하여 데이터 연동

    return함수안의 Component 이름안쪽으로 props 연결 

   외부에 변수정의 및 데이터 입력 

   변수가 정의되면 Customer Component 안 내역들을 변수와 같이 연결 (JSX 문법)

   name={변수.name}

 

 

 

⑧ Customer Component가 App.js에서 정의되었기대문에 최초 작성된 Customer.js에서 Props적용

    {this.props.name}같이 적용하여 서로 상관관계 성립되도록 연동

 

 

 

①번부터 ⑧번까지의 순서는 워낙 React에 대한 기초지식이 없기때문에 Class Component를 만들고 코딩하기 위한 순서를 정리해 놓은것입니다. 코딩하는 순서와 Github에 올려지는 내역까지 하나의 글로 써머리를 했고 향후 쉽게 참고하는데 도움이 되리라 확신합니다.