SW

0. HTML 엘리먼트와 네이티브 컴포넌트의 유사성 리액트 네이티브에서는 HTML 엘리먼트를 사용하지 않고, 이와 매우 유사하면서 다양한 컴포넌트를 사용한다. HTML 리액트 네이티브 div img span, p ul/ol, li , 자식 아이템 이 엘리먼트들은 비록 서로를 대체할 수는 없지만 아주 비슷한 용도로 쓰인다. 1. 컴포넌트 텍스트 렌더링은 매우 기본적인 기능이다. HTML에서는 다양한 엘리먼트(, 등)로 텍스트를 표시할 수 있다. 리액트 네이티브에서는 컴포넌트만이 플레인 텍스트 노드를 자식으로 가질 수 있다. 리액트 네이티브에서 컴포넌트를 다룰 때는 , 같은 하위 태그를 사용할 수 없으나 fontWeight, fontStyle 속성을 이용하여 비슷한 효과를 낼 수 있다. 리액트 네이티브에서 ..

0. 환경설정 리액트 네이티브 개발 환경 설정 방법은 크게 두 가지로 나눌 수 있다. 하나, 매우 빠르고 쉽게 설정이 가능한 Create React Native App이라는 도구를 사용하는 방법이다. 둘, 아주 전형적인 방법으로 리액트 네이티브와 그 dependency까지 모두 설치하게 되는 방법이다. 1. 개발 환경 설정: Create React Native App Create React Native App은 Xcode나 안드로이드 스튜디오를 설치할 필요 없이 리액트 네이티브 앱을 생성하고 실행할 수 있게 해주는 커맨드 라인 도구이다. npm을 이용하여 create-react-native-app 패키지를 설치한다. 리액트 네이티브는 npm을 이용하여 dependency를 설치한다. npm install..

0. 정적인 웹페이지 만들기 Redux를 도입하기전 간단한 웹페이지를 만든다. 1. 부품화 각각의 기능에 대해 모듈화를 시킨다. 2. store 생성과 state 사용하기 store를 생성하고 state를 사용한 코드이다. 결과는 처음과 같지만 reducer내부에 있는 contents의 내용을 바꾸면 그에 해당하는 코드들이 전부 바뀐다는 점이 다르다. 3. action을 dispatch를 통해서 전달하기 store의 state값을 변경하기 위해서 action을 발생시키고 action이 dispatch를 통해서 reducer를 실행시키면 state의 새로운 값을 return 한다. state값이 바뀌면 subscribe하고 있는 함수들을 호출해줌을 통해서 ui가 업데이트된다. event.preventDef..

0. 시간여행과 로깅 먼저 아래 깃헙에 들어간 후 Chrome용 Redux 개발자 툴을 설치하였다. https://github.com/zalmoxisus/redux-devtools-extension zalmoxisus/redux-devtools-extension Redux DevTools extension. Contribute to zalmoxisus/redux-devtools-extension development by creating an account on GitHub. github.com 아래 빨간 테두리 내에 있는 것을 복사해서 코드에 붙여 넣는다. 위와 같이 코드를 작성 후 실행시키면 Redux 개발자 도구를 볼 수 있다. 주의할 점이 file://~~ 이런식으로 브라우저에서 열면 Redux개..

0. reducer와 action을 이용해서 새로운 state 값 만들기 state를 바꾸기 위해선 action을 만들어야하고 그것을 dispatch에 제출하면 dispatch가 reducer를 호출하는데 그때의 이전의 state값과 action값을 동시에 준다. 그러면 reducer함수가 그것을 분석해서 state의 최종적인 값을 return해준다. store.dispatch({type: '~~~'}) ---> dispatch를 사용할 때 type은 반드시 있어야 한다. dispatch는 store를 생성할때 제공한 reducer라는 함수를 호출하도록 약속되어있다. 위와 같이 코드를 작성한 후 state와 action값을 알아보기 위해 console.log(state, action) 을 실행해보았다. ..

0. React & Redux 생활코딩 강좌를 듣고 정리한 내용입니다. React는 사용자 정의 태그, 즉 컴포넌트를 만들어서 체계적이고 잘 정돈된 어플리케이션을 만들어주는 기술이다. Redux는 상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은 대로 변형될 가능성을 낮춰주는 기술이다. 즉, React 건 Redux건 모두 개발에 복잡성을 낮춰주는 기술이라고 할 수 있다. 비유를 해보면 다음과 같다. 왼쪽은 react만으로 구현한 데이터의 흐름이고 오른쪽은 redux를 도입한 후 데이터의 흐름이다. react는 소문과 같고 redux는 미디어 같은 느낌이다. react는 컴포넌트들로 만들어진 사회와 비슷하고 어떤 컴포넌트에서 변화가 생기면 왼쪽에 있는 그림처럼 모든 컴포넌트들로 그 데이터가 전..

0. With Redux 다음은 하나의 버튼을 누르면 그에 상응하는 색으로 전부가 바뀌도록 해주는 코드이다. 색상이 하나 늘어날때마다 추가해야하는 코드의 양이 많아진다. 코드는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 .container{ border: 5px solid black; padding: 10px; } function red(){ document.querySelector('#red').innerHTML = ` red `; } re..

0. Redux 생활코딩 Redux 수업을 듣고 정리한 내용들이다. A predictable state container for JavaScript apps 리덕스는 애플리케이션의 복잡성을 획기적으로 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주는 도구이다. 상태는 그냥 객체이다. 그래서 하나의 객체 안에 애플리케이션에서 필요한 모든 데이터를 넣는다. 한 곳에 데이터를 중앙 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 관리하기 쉽다. 데이터를 외부에서 직접 제어하지 못하게 하여 의도치 않게 state값이 바뀌지 못하도록 한다. state값이 바뀔때마다 state의 데이터를 사용하는 애플리케이션의 컴포넌트들에게 알려서 적용시킨다. 1. state와 render의 관계 redux의 핵..

0. 리액트 네이티브는 어떻게 동작할까? 리액트에서 가상(Virtual) DOM은 화면이 어떤 모습이어야 하는지 개발자가 작성한 내용과 실제 화면에 렌더링되는 것 사이에 존재하는 레이어에 해당한다. 브라우저에서 상호작용하는 사용자 인터페이스를 렌더링하기 위해서는 반드시 브라우저의 DOM을 수정해야한다. 이는 값비싼 동작으로, 과도한 DOM수정은 심각한 성능 저하를 유발한다. 그러나!! 리액트는 페이지의 변화를 바로 렌더링하지 않고 먼저 메모리에 존재하는 가상 DOM에서 변화가 필요한 곳을 계산하고 필요한 최소한의 변경사항만 렌더링한다. 브라우저의 DOM으로 렌더링하는 대신에 리액트 네이티브는 objective-C API를 호출하여 iOS 컴포넌트로 렌더링하고, 자바 API를 호출하여 안드로이드 컴포넌트를..

Learning React Native, 2nd Edition, by Bonnie Eisenman 정리 0. React Native란 무엇인가? 리액트 네이티브는 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크이다. 리액트 네이티브는 사용자 인터페이스를 만드는 페이스북의 자바스크립트 라이브러리인 리액트에 기반을 두고 있다. 브라우저가 아닌 모바일이 타깃. 1. 리액트 네이티브의 이점 대상 플랫폼의 표준 렌더링 API를 사용한다. 작성한 마크업을 플랫폼에 따라 그에 상응하는 진짜 네이티브 엘리먼트로 전환한다. 게다가 리액트는 메인 UI스레드와 분리되어 실행되기에 앱의 역량을 줄이지 않아도 앱은 빠른 성능을 유지할 수 있다. props나 state가 변경될 때 리액트 네이..