개발 공부 일지

교재 참고 🎯 Props : 부모 컴포넌트로부터 상속받는 외부 데이터로서, 자식 컴포넌트에서는 값을 변경할 수 없다. props는 다음과 같이 다룬다. export default class MyComponent extends Component { render() { return ; } } class BookDisplay extends Component { render() { return ( {this.props.book} ); } } state를 이용하여 MyComponent의 내용을 다음과 같이 바꾸어 동적으로도 활용가능하다. export default class MyComponent extends Component { state = { book: 'React Native in Action', }; r..

교재 참고 🎯 State : 컴포넌트가 다루는 값들의 집합체, key-value의 형태로 저장된다. 초기화 컴포넌트에 상태를 저장하는 두가지 방법이 있는데, 서로 차이는 없다. 자신이 편한대로 일관성 있게 사용하면 된다. 1. 속성 초기화 export default class MyComponenet extends Component { state = { name: 'charming-l', age: 22, feeling: 'happy', }; render() { return ( {this.state.name} {this.state.age} {this.state.feeling} ); } } 2. 생성자 이용 render의 내용은 동일하며 1.의 코드중 state를 정의한 부분 대신 아래의 코드를 작성할 수도 ..

교재 컴포넌트(Component) : 데이터와 UI 요소의 집합체 React-Native에서의 앱 개발은 각각의 컴포넌트들을 레고 블록이라고 생각하고, 이들을 잘 조립하여 하나의 커다란 레고 작품을 만드는 과정이라고 생각하면된다. 따라서 컴포넌트의 구성과 조립으로 나누어 설명할 수 있다. 컴포넌트 구성하기 createClass 구문이나 createElement를 이용한 컴포넌트 구성 방식도 있지만,가장 대중적으로, 또 개발자들이 추천하는 두가지 방식에 대해서만 정리했다. 아래 예시 코드의 내용은 Hello World! 라는 텍스트를 보여주는 컴포넌트 구성방식이다. class구문(ES2015, JSX) 고유한 상태를 유지하는 stateful 컴포넌트를 만들 때 주로 사용, class로 감싸져있는 형태. i..

교재 리액트 네이티브의 강점 개발자 가용성 새로운 언어를 배울 필요 없는 개발 플랫폼 => why? 자바스크립트로 전부 이루어져있기 때문에 개발자 생산성 기존엔 안드로이드/iOS 팀 모두가 있어야 앱 개발 가능했었음 => react-native의 등장으로 개발자는 안드로이드/iOS 개발자로 제한 필요 X Redux의 사용으로 앱 전용 플랫폼 뿐 아니라 웹에서도 데이터 아키텍처 공유 가능 성능 다른 크로스 플랫폼들은 네이티브 앱의 성능을 못 따라가지만 리액트 네이티브는 이에 크게 뒤지지 않음 단방향 데이터 흐름 단방향 데이터 흐름을 통해 앱의 이해가 쉬움 지난 소개 글에서 설명함. 개발자 경험 (빠른 컴파일) 웹은 새로고침(F5)을 통해 빠른 컴파일이 가능, but 네이티브 앱에서는 컴파일 시간이 매우 긺..

교재 리액트 네이티브 '리액트'라는 자바스크립트 라이브러리를 사용해 자바스크립트를 이용해서 모바일 앱을 만드는 프레임워크 자바스크립트 언어 하나로 앱 전체를 만들어 코드의 재사용성을 높임 크로스 플랫폼 앱으로 전환하는 데 소요되는 시간 절약 컴포넌트 stateful vs stateless stateless 컴포넌트 : 생명주기 메서드 연결X, 자신만의 고유한 상태 유지 X => 화면에 보여지는 모든 데이터를 속성(=props)으로 받아야함 코드의 상단에는 'react'의 React를 가져와야 하며, 컴포넌트들(View, Text, ...)은 'react-native'에서 가져와야함 stateful 컴포넌트의 상태(=state)를 setState()로 바꿀 수 있으며, 메서드의 결과로는 반드시 render..