하늘을 난 모기

13. React 라우팅 React는 싱글페이지다. 즉, 앱을 사용하는 과정에서 URL의 변경이 거의 없다. 브라우저 렌더링 덕분에 서버에 연결할 이유가 없어서이다. [ 문제점 ] 브라우저를 새로고침 하면 읽고 잇던 페이지의 원래 폼으로 돌아간다. 브라우저의 기록 기능은 접속해 잇던 사이틔의 단일 URL만 기록하므로 브라우저의 뒤로가기 버튼을 눌렀을 때 완전히 다른 사이트로 이동할 수 있다. 페이지의 내용을 변경하면서 URL은 변경되지 않았기 때문이다. 친구들에게 사이트의 특정 페이지를 공유할 수 없다. 첫 페이지와 URL을 구분할 수 없으므로 검색 엔진이 사이트를 색인할 수 없다. 13.1 라우터를 처음부터 구현하기 입력된 URL에 따라 맵핑하기 라우터로 재사용성 높이기 라우터와 매핑으로 앱 구현 13..

12. Webpack 빌드 도구 빌드 도구 (or Bundler) 12.1 Webpack의 역할 자바 스크립트 파일을 최적화하여 적은 수의 파일로 사용자 요청을 처리하는 것 서버 부담 감소, 페이지 렌더링 시간 감소 모든 의존 모듈을 올바른 순서로 불러오도록 한다. 모든 의존 모듈을 한 번씩만 불러오도록 한다. 자바스크립트 파일이 가능한 한 적은 파일로 묶여지도록 한다.(이것을 정적 자원 이라고 부른다.) 12.2 프로젝트에 Webpack 적용하기 설치하고 의존 모듈에 설치하고 package.json에 저장한 다음 webpack.config.js로 Webpack 설정하고 개발 서버(webpack-dev-server)와 핫 모듈 대체 설정 12.2.1 Webpack과 의존 모듈 설치 [ 필요 모듈 ] We..

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..

7. React에서 폼 다루기 input, textarea, option 같은 다른 폼 요소를 통한 입력 처리 방법 7.1 React에서 폼을 다루기 위한 권장 방법 ex) React에서 폼 다루기 handleChange(event) { this.setState({title: event.target.value}) } render() { return }단방향 바인딩 이라고 한다. ; 상태가 뷰를 갱신하는 것이 전부이기 때문 7.1.1 React에서 폼과 이벤트 정의하기 onChange : 폼의 입력 요소에 변경이 생기면 발생 onInput : 요소의 값이 변경될 때 발생. (비추천) onSubmit : 폼 제출 시 발생. ex) enter키로 폼 전송하기 handleKeyUp(event) { if (eve..

6. React에서 이벤트 다루기 6.1 React에서 DOM 이벤트 다루기 ex) event Handler class class SaveButton extends React.Component { handleSave(event) { console.log(this, event) } render() { return save } }ex) constructor을 이용한 바인딩 class SaveButton extends React.Component { constructor(props) { super(props) this.handleSave = this.handleSave.bind(this) } handleSave(event) { console.log(this, event) } render() { return {..

5. React 컴포넌트 라이프사이클 이벤트 컴포넌트의 세밀한 조정을 위해 사용 5.1 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기 React는 라이프사이클 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 모든 React 컴포넌트는 라이프사이클 이벤트가 있다. 마운팅(mounting) 이벤트 : React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생 갱신(updating) 이벤트 : 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생 언마운팅(unmounting) 이벤트 : React 엘리먼트를 DOM에서 제거할 때 발생 5.2 이벤트 분류 마운팅 : React가 이벤트를 한 번만 실행한다. 갱신 : React가 이벤트를 여러 번 실..

4. React 컴포넌트의 상태 객체 속성은 현재 컴포넌트 내부에서 수정할 수 없다. 해당 컴포넌트 생성 시에 전달 받는 값이기 때문이다. 속성 변경 없이 어떻게 뷰를 갱신할까? 상태 객체를 사용하면 된다. 상태(state)는 React 컴포넌트에 데이터를 저장하고, 데이터의 변경에 따라 자동으로 뷰를 갱신하도록 하는 핵심 개념이다. 4.1 React 컴포넌트의 상태란? 상태는 변경 가능한 데이터 저장소. 상태 객체에 접근할 때는 이름을 사용 (this.state) 변경 하고 싶은 작은 단위의 부분만 갱신. ex) 뷰가 갱신되지 않는 안티 패턴 (속성은 변경되지 않는다.) let inputValue = 'Texas' class Autocomplete extends React.Componen..

3. JSX React.createElement()를 계속 작성하는 노가다를 해결 3.1 JSX의 정의와 장점 자바 스크립트의 확장 React.createElement() 호출 반복 해소 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와줌. [ 장점 ] 개발자 경험 개선 ; 중첩된 선언형 구조를 더 잘 나타냄 팀의 생산성 향상 문법 오류와 코드량 감소 ex) non JSX React.createElement( "div", null, React.createElement(HelloWorld, null), React.createElement("br", null), React.createElement("a", { href: "http://webapplog.com" }, "Great ..

2. React 첫 걸음 React의 엘리먼트와 컴포넌트 개념 이해 필요. 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고 한다. 2.1 엘리먼트 중첩 let h1 = React.createElement('h1', 'null, 'Hello World') ReactDOM.render( React.createElement('div', null, h1, h1), document.getElementById('content') ) // output Hello World Hello World2.2 React 컴포넌트 클래스 생성 let h1 = React.createElement('h1', null, 'Hello World..

1. React 살펴보기 기존 템플릿 엔진의 재사용 불편함을 개선하기 위해 Facebook에서 개발한 라이브러리 Templete Language React 재사용 힘듬 재사용이 쉬움 도메인 특정 언어 사용 사용 X 1.1 React란 무엇인가? React : UI Component Library 여러 컴포넌트로 UI를 구성하는 방식 Component-Based Architecture (CBA) 1.2 React가 해결할 수 있는 문제 복잡한 UI로 구성된 프론트엔드 애플리케이션을 개발하고 관리하는 데 어려웠음. '우리는 한 가지 문제를 해결하기 위해 React를 만들었습니다. 우리가 해결하고자 한 문제는 시간에 따라 변화하는 데이터를 다루는 거대한 애플리케이션의 개발입니다.' in Reac..