TIL(2020.12.24)

1. 리액트 개발환경 세팅

1) node.js

• node.js를 직접 사용하지는 않지만 webPack, Babel이 node.js를 사용하기 때문에 필요함.
• windows는 공홈에서 설치(windows 8.1이상)
• 이거땜에 포맷함 ㅎ 사실 할 때 됐지..

2) yarn

• node.js를 설치하면 npm이라는 노드 모듈 관리자가 설치됨.
• 프로젝트에 사용될 라이브러리를 설치하고 라이브러리 버전 관리를 위해 사용됨.
• npm 사용해도 무방하지만 yarn 사용 추천. 더 나은 속도/캐싱 시스템
• 마찬가지로 공홈에서 설치

3) 텍스트 에디터

• vs code추천. 원래 쓰고있었음

4) git bash

• 일반 cmd테이블보다 편함 이것도 윈도우 7일때 자꾸 안돼서 git CMD 썼는데 역시 bash가 편하다

2. Create React App

• 이걸 써서 프로젝트 세팅 및 진행
• 요게 나오기 전에는 package.json을 작성해서 babel, webPack 직접 설치, 설정, react 라이브러리 세팅하는 등 할게 많았는데 이걸 간소화해줌.
• 기존에는 프로젝트 설정 직접 하거나 boilerPlate(템플릿)을 clone해서 썼음.

2-1. 프로젝트 시작하기

1) git bash에서 프로젝트 디렉토리 만들기

• mkdir react-tutorials

2) 리액트 프로젝트 시작하고 프로젝트 이름 쓰기

• npx create-react-app contact-app

3) 2의 작업이 끝나고 디렉토리 이동 후 서버 구동

• cd contact-app
• yarn start

2-2. 코드보기

1) index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';//여까지 기본적인 import
import reportWebVitals from './reportWebVitals';
//강의에서는 registerServiceWorker로 나와있는데 아마 10이상 버전업이 되면서 차이가 나는듯 하다.

ReactDOM.render(
  <React.StrictMode>//강의에선 strictMode가 없었는데 뭘까 공부 ㄱㄱ
    <App />
  </React.StrictMode>,
  document.getElementById('root')//root ID를 가진 DOM을 불러와서 react Component (<App />)을 그리겠다는 뜻.
);

reportWebVitals();

2) 신규 콤포넌트

!!콤포넌트 제작시 참고

• 콤포넌트를 불러올 때 상단에서 import 구문으로 불러와도 되지만 본문에서 <PhoneForm />이런 식으로 작성해도 자동으로 드랍박스 형태의 import구문 로딩 가능
• 콤포넌트가 제대로 import가 안되는 에러로 고생좀 했는데, 콤포넌트 파일명 및 변수 이름에 맨 앞글자를 대문자로 하는 CamelCase로 작성!!

1. App.js

import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm.js';//DOM과 콤포넌트 구분 위해 components 폴더 새로 제작

class App extends Component {
  render() {
    return (
      <div>
        <PhoneForm />//이것만 써도 위의 import구문이 자동 참조된다.
      </div>
    );
  }
}

export default App;

2. PhoneForm.js

import React, { Component } from 'react';

class PhoneForm extends Component {

    state = {
        name : '',
        phone : '',
    } //state 초기값 설정. 이후 setState함수를 이용해 value값대로 변경시켜줌.

    handleChange = (e) => { //e는 event 파라미터임.!!
        this.setState({ //handleChange함수가 아래 onChange이벤트에서 호출되는데,
        onChange가 속한 각각의 name값이 this가 된다.
            [e.target.name] : e.target.value//target은 input이 됨.
        });
    }

    render() {
        return (
            <form>
               <input
                 name = "name" //name이 이번에 처음 등장했는데, 느낌상으로는 
                 js의 class 정도 되는거같다. 추가공부 필요
                 placeholder = "이름"
                 onChange = {this.handleChange} //onChange이벤트가 input에 추가됨.
                 //여기서 this는 input.(name)
                 value = {this.state.name} //input의 value값을 위의 onChange로 인해 변경되는 state값으로 변경
               />
               <input
                 name = "phone"
                 placeholder = "전화번호"
                 onChange = {this.handleChange}
                 value = {this.state.phone}
                 />//name input과 동일한 원리
                 <div>
                     {this.state.name}  {this.state.phone} //입력되는 value값 출력
                 </div>
            </form>
        );
    }
}

export default PhoneForm;