Skeleton의 세상

리액트의 컴포넌트들은 라이프사이클 즉 생명주기를 가지고 있습니다. 생명주기(라이프사이클)이란 컴포넌트가 생성되고 쓰이고 삭제 될때까지의 일련의 과정을 얘기하는 단어입니다. 각 메서드들을 호출하여 사용할 수 있는데 각 항목들을 한번 알아봅시다 1. render() 함수 컴포넌트의 가장 기본이자 가장 중요한 함수 입니다. 컴포넌트의 모양을 의미합니다. 2. constructor 메서드 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행되는 메서드 입니다. 3. getDerivedStateFromProps 메서드 v16.3이후에 새로 만들어진 라이프사이클 메서드이며 props로 받아온 값을 state에 동기화 시키는 용도로 사용되며 컴포넌트를 마운트하거나 props를 변경할때 사용됩니다. 4. component..

리액트의 JSX를 사용함에 있어 몇가지의 장점이 있습니다. 그 장점에 대하여 소개를 해볼까 합니다. 1. 보기 쉽고 익숙함 JSX는 자바스크립트의 확장 문법으로써 XML과 닮아 있습니다. HTML과 같이 작성이 가능하다는 점이 크게 작용합니다. 2. 오류 검사가 편함 JSX에 오류가 있다면 바벨이 코드를 변환하는 과정에서 자동으로 이를 감지해내 오류를 내줍니다. 찾아서 수정하기가 편합니다 3. 높은 활용도 JSX는 흔히 HTML에서 사용되는 div span a 등 태그들을 사용할 수 있고 컴포넌트도 JSX안에서 작성이 가능합니다.

리액트를 배우기전, 리액트를 설치하고 프로젝트를 생성해 봅시다. 과정은 다음과 같습니다 Node.js / npm 설치 => 코드 에디터(VisualStudio Code)설치하기 => git 설치하기 => 프로젝트 생성하기 1. 리액트는 Node.js를 기반으로 하고있기 때문에 Node.js와 npm을 반드시 설치해 주어야 합니다. Node.js 다운로드 에서 다운로드를 진행하고 설치해 줍니다. 2. 코드 에디터를 설치해줍니다. 코드를 편하고 빠르게 작성 수정 하기위해서 꼭필요한 에디터 입니다. VisualStudio Code 설치 위의 링크를 통하여 VisualStudio Code를 설치해 줍니다 VisualStudio Code를 설치하고 나면 확장 프로그램을 설치해주어서 코드작성에 도움을 받을 수 있습..

웹의 문제점중 하나인 부분이 있는데요! 한번에 값들을 전부 받아서 돌리기때문에 상대적으로 느리게 표현됩니다. 하지만 앱에서는 조금 다르게 동작하여야합니다. 값들을 불러오면서 느려지거나 화면이 안보이는 문제가 있습니다. 그래서 리액트 네이티브에서는 FlatList를 사용하여 보여지는 부분만 불러오고 다른부분은 보여지지않게 함으로써 느려짐 현상을 없애줍니다. 이게 FlatList를 사용해야하는 이유라고 할 수 있습니다. 그럼 어떻게 사용되는지 간단히 한번 살펴볼까요? import React from 'react'; import styled from 'styled-components/native'; import { useNavigation } from '@react-navigation/native'; impo..

리액트 네이티브에는 PanResponder라는 클래스를 제공해 줍니다. 이 클래스를 통해서 드래그 할때의 제스쳐를 확인할 수 있습니다. 컴포넌트에서 PanResponder를 사용하기 위해서는 PanResponder객체를 생성하고 컴포넌트의 렌더 함수에 적어주어야 합니다. PanResponder는 반드시 콜백 함수가 필요한데, 간단히 살펴보겠습니다. UNSAFE_componentWillMount() { this._panResponder = PanResponder.create({ onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder onMoveShouldSetPanResponder: this._handleMoveShouldSetPanRes..

리액트 네이티브는 터치에 반응하는 인터페이스를 만들 수 있도록 여러 API를 제공해 줍니다. 그 중 , 두가지 컨테이너 컴포넌트를 한번 알아봅시다 1. 가장 기본적인 방법으로 상호작용하는 버튼을 만들고 싶을때 사용합니다. 위와 같이 기본적인 버튼을 사용할 수 있습니다. 2. 뷰가 터치될 때 오버레이를 추가하여 사용자에게 시각적인 효과를 부여합니다. 이러한 효과는 웹이 아닌 네이티브앱처럼 느껴지도록 합니다 사용법 또한 간단하게 사용할 수 있습니다. 사용자 탭 테스트 위와 같이 감싸주면 사용이 가능합니다. 탭을 하고 있을때와 탭한 것을 떼었을때의 경우 를 따로 확인이 가능합니다. 이렇게 간단히 알아보았는데요 궁금하신 부분이나 도움이 필요하신부분은 댓글로 남겨주세요!

1. 고정값으로 지정 import React, { Component } from 'react'; import { View } from 'react-native'; export default function FixedDimensionsBasics() { return ( ); } 고정값은 말그대로 고정적인 값을 넣음으로써 크기를 고정시킵니다. 2. flex값으로 지정 import React, { Component } from 'react'; import { View } from 'react-native'; export default function FlexDimensionsBasics() { return ( ); } 여기에서 중요한 점이 있습니다 부모 뷰에서 flex: 1을 지우게 되면 결과가 보이지 않게되..

리액트 네이티브는 styleSheet를 이용하여 Javascript처럼 스타일을 적용할 수 있습니다. import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const styles = StyleSheet.create({ container: { marginTop: 50, }, bigBlue: { color: 'blue', fontWeight: 'bold', fontSize: 30, }, red: { color: 'red', }, }); export default LotsOfStyles = () => { return ( just red just bigBlue bigBlue, then red red, then bigBl..

React-Native를 사용하기 위해서 expo를 설치해 주어야합니다. 하지만 그전에 npm이 설치가 되어있어야 하겠죠? node.js를 설치해 줍니다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치를 완료 하였다면 이제 npm install -g expo-cli 를 입력해서 expo-cli를 설치해줍니다. 여기서 -g (global)로 설치를 진행하려면 관리자권한이 필요한데 이때는 sudo npm install -g expo-cli 이렇게 입력해주면 해결됩니다. 쭈우욱 설치가 되었다면 expo init AwesomeProject cd Aw..

리액트 네이티브에서 제공해주는 TextInput이 있습니다. 이 TextInput은 많은 기능이 있습니다. 스타일 또한 자유롭게 사용이 가능하며 포커스, 값변경시 등 체크가 가능합니다. const [value, onChangeText] = React.useState('값'); onChangeText(text)} value={value} /> 이렇게 사용을 할 수 있습니다. allowFontScaling 텍스트 크기 접근성 설정을 고려하여 글꼴 크기를 조정할지 여부를 지정합니다. 기본값은 true입니다. autoCapitalize TextInput특정 문자를 자동으로 대문자로 표시 할 수 있습니다. 이 속성은과 같은 일부 키보드 유형에서는 지원되지 않습니다 name-phone-pad. characters:..