하늘을 난 모기

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

회사에 입사했다.당연히 안드로이드를 할 줄 알았다.... 나는 프론트 개발을 시작하게 됐다. 리액트를 사용한다.그래서... 리액트를 시작했다. 우선 아무것도 모르기 때문에 책을 한 권 독파하기 시작했다. 책은 '리액트 교과서' 버라이어티한 프론트 입문 개발기 시작

윈도우 설치도 크게 어려울게 없더라.. 1. 초기 필요 환경 설정하기(Windows PowerShell 5.0 or git) 필요.파워쉘보다 깃이 설치가 더 편하니 깃을 설치하도록 한다. 링크 2. Flutter SDK 설치Flutter 공식 홈페이지에 올라와 있는 SDK를 설치한다. 링크 3. 압축 해제설치한 경로로 이동하여 합축을 해제한다. (이 때 주의할 점은 압축 해제한 파일의 경로에는 한글이 있으면 안된다.) 4. 환경 변수 설정윈도우즈키 + R로 실행창을 열고sysdm.cpl 입력 후 확인고급 탭으로 이동하여 하단에 환경변수 클릭사용자 변수에 Path를 더블클릭 하여 설치한 Flutte의 경로를 등록한다.(설치 경로\flutter\bin) 5. Flutter 실행설치된 Flutter 경로로 가..

구글에서 열심히 밀고 있는 (개인적인 생각..) Flutter를 다뤄보기로 했다.Android와 iOS를 하나의 프레임워크로 만들 수 있다는 점에서 기존 네이티브 앱 보다 좋은 이점을 가지고는 있으나..역시 새로운 언어를 배우는 것은... 흥미롭다 (응?) Flutter은 공식 홈페이지를 제외하고는 아직 자료가 그렇게 풍부하지 않은 것 같다. (이것 또한 개인 생각..)우선은 설치부터 알아보기로.. 이 글의 설치 기준은.. Mac OS윈도우는 열심히 공식 홈페이지를... 1. Flutter SDK 설치하기Flutter 공식 홈페이지에서 제공하는 SDK를 설치한다. (https://flutter.io/setup-macos/)2. 압축된 파일을 받아왔기 때문에 압축을 해제한다.(설치 한 폴더에서 해도 좋고,..