Reactjs정리.txt

1. React 공부

.Babel ES6/ES7 설치
.Git History 설치
.HTML Snippet
.jsx snippet
.jsx Beautify
.React code snippet
.View in Browser

1-1. git 설치 
http://igotit.tistory.com/entry/Visual-Studio-Code-%EA%B0%9C%EC%9A%94-%EC%BD%94%EB%93%9C%ED%8E%B8%EC%A7%91%EC%A0%84%EB%AC%B8-Git-%EB%B9%8C%ED%8A%B8%EC%9D%B8
https://git-scm.com/download/win
http://gomcine.tistory.com/entry/VS-Code%EC%97%90-Git-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-Windows

1-2. git 설정
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

2. 문법 정리
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98
//테스트


3. 공부 정리
https://velopert.com/1266
https://cjh5414.github.io/redux-example/
http://beomy.tistory.com/35

4. Redux 정리
  1) create-react-app redux-counter
  2) npm install redux 

  3) 파일 제거 
    App.css
    App.js
    App.test.js
    logo.svg

  4) container, presentational components
     UI 쪽과 Data 쪽이 분리되어 프로젝트를 이해하기가 쉬워지며, 컴포넌트의 재사용률도 높여줍니다.

    4-1) containers에 App.js제작
    4-2) src 밑에 incex.js제작

  5) Component 만들기
    5-1) Counter.js만들기 
         이 컴포넌트는 숫자, 색상값과, 더하기, 빼기, 그리고 색상변경 함수 3개를 props 로 전달받는 컴포넌트입니다.

  6) Actions 만들기
    6-1) ActionTypes 준비하기 
        action 은 하나의 객체라고 했었죠? 모든 액션 객체는 type 이라는 값을 지니고 있어야 합니다.

    6-2) Action Creator 만들기 
        액션을 만들때마다 객체를 그때그때 만들기는 힘들겠죠? 그래서 우리는 액션을 만드는 함수를 만들겠습니다. 이를 액션 생성자라고 부릅니다.

        import * as types from './ActionTypes';
        export const increment = () => ({
            type: types.INCREMENT
        }); 
    
  7) 리듀서 만들기
    7-1)  이 리듀서 파일에는 최초변화를 일으키기전, 지니고있어야 할 초기상태가 정의되어야 하죠.
      src/reducers/index.js

      import * as types from '../actions/ActionTypes';

      // 초기 상태를 정의합니다
      const initialState = {
          color: 'black',
          number: 0
      };

    
  8) 스토어 만들기
    Store 는 리덕스에서 가장 핵심적인 인스턴스입니다. 이 안에 현재 상태를 내장하고있고, 구독(subscribe)중인 함수들이 상태가 업데이트 될 때 마다 다시 실행되게 해주죠.

    redux 에서 createStore 를 불러온다음에 해당 함수의 파라미터로 우리가 아까 만든 리듀서를 넣어주면돼요.

    // 스토어 생성
    const store = createStore(reducers);

      8-1) Provider 컴포넌트를 사용하여 리액트앱에 연동
      Provider 는 react-redux 라이브러리에 내장되어있는, 리액트 앱에 store 를 손쉽게 연동 할 수 있도록 도와주는 컴포넌트입니다.

      8-2)
      이제 컨테이너 컴포넌트를 만들 차례입니다. 컨테이너 컴포넌트를 store 에 연결을 시켜주려면 react-redux의 connect 함수를 사용해야하는데요, 이 함수의 파라미터로 컴포넌트에 연결시킬 상태와, 액션함수들을 전달해주면, 컴포넌트를 리덕스 스토어에 연결시키는 또 다른 함수를 반환합니다. 이 과정에서 리턴된 함수 안에, 프리젠테이셔널 컴포넌트를 파라미터로 전달해주면 리덕스 스토어에 연결된 컴포넌트가 새로 만들어집니다.

      컴포넌트에 연결시킬 상태와 액션함수를 정의할땐 각각 함수를 만들어줘야하는데요. 상태를 연결시킬땐 state, 액션함수를 연결시킬땐 dispatch 를 파라미터로 전달받는 함수를 만들어서 객체를 반환하면 이를 props 로 사용 할 수 있게 됩니다.


4-1. 멀티 카운터 만들기 
  1) 스토어 코드 수정  -> const store = createStore(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

  2) ActionTypes 수정
  export const CREATE = 'CREATE';
  export const REMOVE = 'REMOVE';

  3) acionts/index.js 수정
  export const create = (color) => ({
    type: types.CREATE,
    color
  });

  export const remove = () => ({
      type: types.REMOVE
  });

  4) Reducers 고치기
  1장에서 만들었던 리듀서들과 작동방식이 다르므로, reducers 디렉토리 안에 있는 기존에 만들었던 color.js, number.js 를 삭제하고, index.js 파일은 내용을 비우고 새로 작성하세요.

  5) Buttons 컴포넌트 만들기
  이 컴포넌트는 두개의 버튼을 내장하고 있으며, 새 카운터를 생성하는 onCreate 함수, 그리고 맨 마지막 카운터를 제거시킬 onRemove 함수를 props 로 전달받습니다.

5. node - react 정리
https://velopert.com/1492


파일 구조.
├── .babelrc                # babel 설정파일
├── build                   # 서버 빌드 디렉토리
├── package.json		
├── public                  # 클라이언트 디렉토리
│    ├── bundle.js          # 컴파일된 스크립트
│    └── index.html         # 메인 페이지
├── server                  # 서버 디렉토리 (ES6)
│    ├── main.js            # 서버 사이드 메인 스크립트
│    └── routes
│        └── posts.js       # 예제 라우터
├── src
│    ├── App.js             # App 컴포넌트
│    └── index.js           # 클라이언트 사이드 메인 스크립트
├── webpack.config.js       # webpack 설정파일
└── webpack.dev.config.js   # webpack-dev-server 를 위한 설정파일

//정리 시작