달비의 개발 연구

React Native를 이용하여 간단한 리셋, 더하기, 결과 계산기를 만들어 보겠습니다. 계산기 컴포넌트 자리 잡기(CSS)const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', backgroundColor: '#fff', alignItems: 'stretch', justifyContent: 'center', }, text:{ fontSize: 60, fontWeight: '700', color: 'white', paddingBottom: 30, paddingRight: 30, }, resultContainer: { flex: 1, back..

React Native rendering(리렌더링) state(상태)와 Hook 함수 이번에는 React Native를 이용하여, 간단한 계산기를 만들어 보려고 합니다.간단한 계산기를 만들어 보기 전에  미리 알아둬야 할 내용에 대해 언급 해 보겠습니다. 리렌더링동적으로 변하는 값은 state를 이용하여 처리 컴포넌트에서 관리하는 변경 가능한 값을 의미 합니다.props와 성격이 비슷하지만, props는 부모 컴포넌트로부터 전달받은 데이터로 관리의 주체가 부모 입니다. 하지만 state는 컴포넌트 내에서 생성 및 관리하는 데이터로 관리의 주체가 컴포넌트 자신이 됩니다. [컴포넌트가 리렌더링 되는 조건]- 컴포넌트가 변경되었을 때- 컴포넌트로 전달된 props가 변경되었을 때- 부모 컴포넌트가 리렌더링 됬..

React Native Style, Component 적용하기(Button, Button Event, 버튼, 버튼 이벤트)리액트 네이티브를 이용하여 스타일CSS 및 컴포넌트를 적용하는 방법에 대해 포스팅 해보겠습니다. Style 적용리액트 네이티브 에서 스타일을 적용할 때 여러가지 방법이 있는데,그 중에 인라인 스타일 코드 형식과 StyleSheet.create() 함수 호출하는 방식이 있다. 인라인 스타일 코드란? 컴포넌트의 style에 직접 스타일 코드를 작성하는 것을 인라인 스타일이라고 한다. Calc App ※ style 코드를 확인 해 보면 Json방식인 것을 확인 할 수 있다.속성의 경우 camel case로 작성 해야 하고, px, em 등 단위를 사용하지..

React Native - JSX프로젝트 만들기( node.js version 16.20.2 lts ) CMD 명령어 입력 (App.js 프로젝트 만들기)프로젝트 생성 한 경로로 가서 커맨드 입력expo init rn-calc  다운로드 완료 후 npx eslint --init위 커맨드를 입력하면 선택 하라고 나오는데아래 처럼 선택하면 된다. to check syntax and find problems 선택JavaScript modules 선택React 선택No 선택Node 선택JSON 선택yes / npm 선택 참고 사항 : ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다다운로드를 완료 했다면 .eslintrc.json 파일 수정"extends":..