2017년 6월 23일

[공부일지] Udemy – Modern React with Redux 완강, 강의정리

링크: https://www.udemy.com/react-redux

강사: Stephen Grider

강의주제: React, Redux, React-promise

걸린시간: 3일(약 15시간)

평가:

사실 이 강의를 들은건 작년 말인데, 개발에 반년 정도 손떼고 있다보니 ES6부터 해서 리엑트 전부 까먹어서 다시 들었다. 일단 스테판 강의는 일전에도 말했듯이 꽤나 직관적이로 예제 위주라서 따라하기 쉽다. 난이도는 초급 정도이며 초급에 맞게 잘 설명해준다. 

강의내용 정리 (내맘대로..)

  • React 기본

    • JSX쓰는이유: Babel을 통해 React 객체로 컴파일 하기 위해.
    • Import React form ‘react’; 를 통해 React 클래스 import

      • 이렇게 하면 ReactDOM쓰라고 에러남.
      • React 라이브러리는 리엑트가 어떻게 작동하는지 암.
      • ReactDOM라이브러니는 리엑트와 DOM이 어떻게 작용하는지를 암. 
    • import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <div>Hi!</div>
}
ReactDOM.render(<App />, document.querySelector('.container'));

       

    • 위에서 App은 컴포넌트. 컴포넌트라서 render에서 저렇게 태그식으로 써줘야함.
    • querySelector의 경우, 어디 위치에 App이 쓰여질지를 정의.
  • Container

    • 데이터를 담고있는 Class라고 보면됨. 전체 페이지를 구상하는 영역
  • Components

    • 부분부분 반복해서 사용되는 부분. 예를들어 차트?
  • Reducer

    • 리듀서는 state, action을 가짐. action에 의해 호출됨.
    • state기본값은 null로 주기.
    • 리듀서 내에서 action에 대한 행동을 정의. 보통 action.payload를 리턴함.
    • 리듀서 정의 후, index리듀서 내에 combineReduce해줘야함.
  • 컴포넌트 내에서 리듀서 쓰기

    • import {connect} from 'react-redux’;
    • function mapStateToProps(state){
    •   return {
    •     book: state.activeBook
    •   }
    • }
    • export default connect(mapStateToProps)(BookDetail);
    • 위와 같이, connect함수로 mapStateToProps를 통해 리듀서 내에서 정의한 객체를 페이지 내에서 쓰일것들을 정의함.
  • Action Creator

    • Action은 페이지 내에서의 행동, 즉 액션을 정의함.
    • 언제나 action을 return (type with payload)
    • 액션 정의 후에는 리듀서에서 케이스별로 정의해줘야함.
    • Ex) Action/index.js
      export function selectBook(book){
    •   return {
    •       type:'BOOK_SELECTED',
    •       payload: book
    •   };
    • }
    • 이후에 
    • // Reducers/reducer_active_book.js
// Only called when action is actived
export default function(state = null, action) {
  switch(action.type){
    case 'BOOK_SELECTED':
      return action.payload;
  }
  return state;
}

       

    • 위와 같은 식으로 정의. payload를 리턴.
  • 일반 함수에서 this.setState({term: event.target.value}); 같은거 못씀

    • constructor에서 bind해줘야함.
    • this.onInputChange = this.onInputChange.bind(this);
  • Middleware

    • ActionCreator 이후에 Reducer로 전달되기 전에 중간 처리함.
    • 액션의 타입이나 페이로드에 따라 그대로 전달할지, 스톱할지 등등을 처리.
    • Like doorman
    • 보통 Ajax로 action에 대해 데이터 채우기 위해 사용.
  • 컴포넌트-리듀서 연결

    • function mapDispatchToProps(dispatch){
  return bindActionCreators({fetchWeather}, dispatch);
}
export default connect(null, mapDispatchToProps)(SearchBar);

       

    • mapDispatchToProps로 디스패치와 액션 연결 후, connect로 클래스 자체(위에서는 SearchBar)연결
    • 이렇게 하면 클래스 내 함수에서   this.props.fetchWeather(this.state.term); 이런식으로 액션 크리에이터에서 정의한(여기선 ㄴfetchWeather)사용가능.
  • React Router

    • import {BrowserRouter, Route, Switch} from 'react-router-dom’; 를 통해 사용
    • index.js에 <App /> 대신 <BrowserRouter> 를 통해서 라우팅 정의
    • <Switch>의 경우는 URL간 이동을 위해. 부모가 중복 안되게. 
    • <BrowserRouter>
    •       <div>
    •         <Switch>
    •           <Route path="/posts/new" component={PostsNew} />
    •           <Route path="/" component={PostsIndex} />
    •         </Switch>
    •       </div>
    •     </BrowserRouter>
    • 위의 경우는 /posts/new 를 찾고, /를 찾음. 맞는것을 위에서부터 순서대로 찾음.
  • (참고) componentDidMount 쓰는 이유: ajax가 async해서. 컴포넌트가 다 로드되고 나서 해야함.
  • Redux Form

    • http://redux-form.com 에 설명 많음.
    • redux-form은 리덕스 사용하므로 combinereducer에 추가해줘야함. 
    • import {reducer as formReducer} from 'redux-form';
import PostReducer from './reducer_posts';

const rootReducer = combineReducers({
  posts: PostReducer,
  form: formReducer
});

       

    • 위와 같은 식으로 초기화
    • 사용

      • Form 을 먼저 정의히고 Field로 사용.
      • export default reduxForm({
      •   form: 'PostsNewForm'
      • })(PostsNew);
      • 이런식으로 폼 이름 먼저 정의