개발새발 개발개발

✨ 스니펫(Snippet)이란?프로그래밍을 하다 보면 항상 반복해서 치는 코드가 있다. 예를 들어 console.log()처럼 매번 입력하는 코드, 혹은 자주 쓰는 useEffect, function, interface 선언 등은 개발자의 손가락을 지치게 만든다. 이럴 때 유용한 도구가 바로 스니펫(Snippet)이다.스니펫이란, 개발자가 자주 사용하는 코드 조각을 저장해두고, 짧은 키워드로 빠르게 입력할 수 있게 도와주는 기능이다.React Snippets란?React Snippet는 VSCode의 공식 확장 기능 중 하나로, React개발에 필요한 코드조각(Snippet)을 단축키 형태로 등록해 두고 Tab 키 한번으로 빠르게 완성시킬 수 있도록 도와준다. 💡 왜 스니펫을 써야 할까?생산성 향상: ..

React Navigation 1개의 화면으로 동작하는 App은 거의 찾아볼 수 없다. 상태와 동작에 따라 화면을 전환해주는 무언가가 필요한데 이런 화면간 이동을 도와주는 라이브러리가 React Navigation이다. Navigation은 stack 구조로 되어있어서 화면을 이동하면 전 화면이 사라지는 것이 아니라 기존의 화면 위에 새로운 화면이 쌓이는 구조로 되어있다. 설치 터미널을 킨 후 navigation을 사용하고 싶은 프로젝트에 들어간다. 패키지 설치 npm install @react-navigation/native npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-s..

1. Modal Modal 컴포넌트는 모든 View 위에 컨텐츠를 표시해주는 컴포넌트이다. —Example import React, { useState } from 'react'; import {View, Modal, StyleSheet, Text, TouchableHighlight } from 'react-native'; const App = () => { const [modalVisible, setModalVisible] =useState(false); return ( Hello World! { setModalVisible(!modalVisible) }} > Hide Modal { setModalVisible(true) }} > Show Modal ) } const styles = StyleSheet..

1. TouchableWithoutFeedback TouchableWithoutFeedback 컴포넌트는 자식 컴포넌트의 이벤트가 발생할 때 아무런 효과도 주지 않게 해주는 컴포넌트이다. 💡 해당 컴포넌트는 하나의 자식 컴포넌트만 적용이 되므로 여러 개의 컴포넌트에 적용하고 싶을 때는 View 컴포넌트 안에 컴포넌트들을 넣어줘야한다. —Example export default App; import React, { useState } from 'react'; import { View, StyleSheet, Text, TouchableWithoutFeedback } from 'react-native'; const App = () => { const [count, setCount] = useState(0); ..

FlatList 컴포넌트는 많은 양의 리스트 아이템을 보여주고 할 떄 쓰이는 React-Native 컴포넌트이다. Scroll View와 유사한 기능을 하나 동작 방식에 차이점이 있다. 는 데이터가 화면에 보이지 않을 때 사용자가 Swipe를 통해 안보이는 데이터를 볼 수 있도록 하기위한 컴포넌트이다. 다시 말해서 출력해야하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트이다. 는 모든 데이터를 한번에 렌더링하는 것이 아니라 보여지는 부분이나 혹은 수동으로 설정한 양 만큼의 데이터만 렌더링이 되고 화면에 데이터가 보여지지 않는 곳은 기다렸다가 사용자가 swipe를 할 때 swipe한 화면의 크기만큼 자동으로 리렌더링이 되어 보여지는 컴포넌트이다. 다시 말해서 데이터의 길이가 가변적이..

1. ScrollView데이터의 양이 많아서 화면을 넘어가면 스크롤이 생기게 해주는 코어 컴포넌트이다. 스크롤을 빠르게 내리면, 데이터를 처리하는 속도가 스크롤 내리는 속도를 따라가지 못해서 흰색화면만 보일 수 있다. —Exampleimport React from 'react'; import {StyleSheet, Text, SafeAreaView, ScrollView} from 'react-native'; const App = () => { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini..

1. ButtonReact Native에서 버튼 컴포넌트를 만들어주는 키워드이다. —Exampleimport React from 'react'; import {View, StyleSheet, Button, SafeAreaView, Alert, Text} from 'react-native'; const Separator = () => ( ); const App = () => ( The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone. Alert.alert("Simple Button pressed")} /> Adjust the colo..

1. TextText는 텍스트를 표현하기 위한 컴포넌트이다. React-Native에서 기본적으로 제공하는 컴포넌트에서는 Text와 TextInput을 사용해야지 텍스트를 삽입 가능하기 때문에 필수적인 컴포넌트 중 하나이다. —Exampleimport React from 'react'; import {View, StyleSheet, Text} from 'react-native'; const App = () => { return ( I am bold and red ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, baseText: { fontWeight: ..

1. Image —sourceimport React from 'react'; import {View, StyleSheet, Image} from 'react-native'; const App = () => { return ( ) } const styles = StyleSheet.create({ container: { flex : 1, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' }, image1: { width: 200, height: 200, }, image2: { width: 50, height: 50, marginTop: 50 } }); export default App; require : 폴더에서 가져오는 경우 사..

10-1 개요padding과 margin은 레이아웃을 할 때 공백을 어느정도 줄껀지를 설정하는 함수이다.여백을 너무 많이주거나 적게 주게되면 App의 디자인에 문제가 생긴다.적절한 여백을 통해서 깔끔한 App 디자인을 만들어야 되는데 이 때 중요한 요소가 바로 padding과 margin이다. https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf 10-2 Marginmargin은 부모컴포넌트나 같은 부모 컴포넌트 안에 있는 자식들과의 여백을 지정하는데 사용한다. —Exampleimport React from 'react'; import {Text, View, StyleSheet, SafeAreaView} from 'react-native'..