본문 바로가기

React12

MobX MobX 4가지 주요 개념을 가지고 있다. Observable State (관찰 받고 잇는 상태) 앱의 상태가 Observable State (관찰 받고 있는 상태) 변화된 부분을 감지 Computed Value (연산된 값) 기존 상태 값과 다른 연산된 값에 기반하여 만들어질 수 있는 값. 바뀐 값 Reactions (반응) Computed Value는 연산해야 될 때에만 처리되지만, Reactions는 값이 바뀔 때 해야 할 일임. ex) Observable State의 내부 값이 바뀔 때 console.log() 호출 Actions (액션; 행동) 상태에 변화를 일으키는 것. autorun 자동으로 그 값을 주시하여 그 값이 바뀔 때 마다 함수가 주시되도록 해줌. 하나하나 observe 해주지 않아.. 2018.12.02
13. React 라우팅 13. React 라우팅 React는 싱글페이지다. 즉, 앱을 사용하는 과정에서 URL의 변경이 거의 없다. 브라우저 렌더링 덕분에 서버에 연결할 이유가 없어서이다. [ 문제점 ] 브라우저를 새로고침 하면 읽고 잇던 페이지의 원래 폼으로 돌아간다. 브라우저의 기록 기능은 접속해 잇던 사이틔의 단일 URL만 기록하므로 브라우저의 뒤로가기 버튼을 눌렀을 때 완전히 다른 사이트로 이동할 수 있다. 페이지의 내용을 변경하면서 URL은 변경되지 않았기 때문이다. 친구들에게 사이트의 특정 페이지를 공유할 수 없다. 첫 페이지와 URL을 구분할 수 없으므로 검색 엔진이 사이트를 색인할 수 없다. 13.1 라우터를 처음부터 구현하기 입력된 URL에 따라 맵핑하기 라우터로 재사용성 높이기 라우터와 매핑으로 앱 구현 13.. 2018.12.02
12. Webpack 빌드 도구 12. Webpack 빌드 도구 빌드 도구 (or Bundler) 12.1 Webpack의 역할 자바 스크립트 파일을 최적화하여 적은 수의 파일로 사용자 요청을 처리하는 것 서버 부담 감소, 페이지 렌더링 시간 감소 모든 의존 모듈을 올바른 순서로 불러오도록 한다. 모든 의존 모듈을 한 번씩만 불러오도록 한다. 자바스크립트 파일이 가능한 한 적은 파일로 묶여지도록 한다.(이것을 정적 자원 이라고 부른다.) 12.2 프로젝트에 Webpack 적용하기 설치하고 의존 모듈에 설치하고 package.json에 저장한 다음 webpack.config.js로 Webpack 설정하고 개발 서버(webpack-dev-server)와 핫 모듈 대체 설정 12.2.1 Webpack과 의존 모듈 설치 [ 필요 모듈 ] We.. 2018.12.02
8. 확장성을 고려한 React 컴포넌트 8. 확장성을 고려한 React 컴포넌트 8.1 컴포넌트의 기본 속성 defaultProps를 정적 클래스 속성으로 추가 ex) defaultProps 예시 class Datepicker extends React.Component { ... } Datepicker.defaultProps = { currentDate: Date(), rows: 4, locale: 'US' }8.2 React 속성 타입과 유효성 검사 propTypes 정적 속성을 이용하여 속성 타입 설정 ex) propTypes 예시 class Datepicker extends React.Component { ... } Datepicker.propTypes = { currentdate: PropTypes.string, rows.. 2018.12.02