전체 글125 [React Native] 3-4 새 글 작성하기 이번엔 WriteScreen의 기능을 구현하겠습니다. 그리고 FeedsScreen에 WriteScreen을 열 수 있는 FloatingWriteButton도 만들어 보겠습니다. 프로젝트에 components 디렉터리를 만들고 그 안에 파일을 작성하세요 components/FloatingWriteButton import React from 'react'; import {View, StyleSheet, Platform, Pressable} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; function FloatingWriteButton() { return ( [ styles.button, Platform.OS .. 2023. 3. 14. [React Native] 3-3 useContext Hooks 함수 Render Props 는 리액트에 Hooks가 없던 시절 유용했고 지금은 그렇게 사용하지 않습니다. (,,,,,,ㅋ) 왜냐하면 리액트에 useContext라는 Hook을 사용하면 Context의 값을 훨씬 간결하게 사용할 수 있습니다. screens/FeedsScreen.js import React, {useContext} from 'react'; import {View, StyleSheet, Text} from 'react-native'; import LogContext from '../contexts/LogContext'; function FeedsScreen() { const value = useContext(LogContext); return ( {value} ); } const styles =.. 2023. 3. 13. [React Native] 3-2 Context API 기존에 네비게이션 기능을 사용하지 않을 때는 데이터를 다른 컴포넌트에 전달하기 위해 Props를 사용했습니다. functionc Couter({ value, conIncrease, onDecrease}) { retrun ( {value} 2023. 3. 13. [React Native] 3-1 다이어리 앱 만들기 앞서 복습하는 겸 작성하는 글들이 있었지만 이젠 그냥 공부하면서 진행하는 것을 올리는게 더 좋을 거 같아 갑자기 뛰어 넘어왔다. 배운걸 종합하여 다이어리 앱을 만드러 볼건데 다룰 내용은 다음과 같습니다. 네비게이션 설정 Context API를 사용한 전역 상태 관리 date-fns를 사용한 날짜 포맷팅 Animated를 사용한 애니메이션 효과 우선 프로젝트를 새로 만들어 줍니다 $ npx react-native init DayLog 그리고 마찬 가지로 App.tsx파일이 만들어졌기 대문에 .js파일로 리팩토링해줍니다. 그후 폴더에 들어가 필요한 라이브러리들을 다운 받겠습니다. cd DayLog yarn add @react-navigation/native @react-navigation/native-sta.. 2023. 3. 10. [React Native] 2-5 Props로 컴포넌트 스타일 커스터마이징 먼저 이전에 만들었던 사각형을 모서리를 부드럽게 만들어 보겠습니다. 다음과 같이 코드를 수정합니다 import React from 'react'; import {View, StyleSheet} from 'react-native'; function Box(props) { return ( ); } const styles = StyleSheet.create({ box: { width: 64, height: 64, backgroundColor: 'black', }, rounded: { borderRadius: 16, }, }); export default Box; 이렇게 모서리가 둥글둥글 해졌습니다. 앞서 말씀드린 것처럼 리액트 네이티브는 웹의 CSS와 다르게 수치가 하나이기 때문에 숫자만 입력하시면 됩니다. .. 2023. 3. 9. [React Native] 2-4 StyleSheet으로 컴포넌트에 스타일 적용 [리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다. React Native를 다루게 된 대부분의 사람들은 웹에서 CSS를 다뤄봤을 것이라고 생각합니다. 그렇다면 아마 쉽게 감을 잡을 수 있을 것이라고 생각합니다. const styles = StyleSheet.create({ container : { backgroundColor : 'black', color : 'white', borderWidth : 4, borderStyle : 'solid', borderColor: 'blue' }, title : { fontSize : 24, fontWeight : 'bold' } }) 이런식으로 작성하게 되는데 안에 형태를 보면 굉장히 CSS와 비슷하게 되어 있습니다. 다만 주의해야 할 점은 .. 2023. 3. 8. [React Native] 2-3 JSX 문법 [리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다. 마치 HTML 코드처럼 쓰이고 있는 괄호로 감싸져 있는 문법들을 이야기합니다. 로 열렸으면 반드시 로 닫혀야 하며 닫히지 않으면 오류가 납니다. 또한 와 같이 스스로 닫는 태그도 사용할 수 있고 가장 주의할 점은 컴포넌트에서 JSX를 반환할 때에는 반드시 하나의 태그로 묶여있어야합니다. import React from 'react'; import {View, Text} from 'react-native'; function Greeting(props) { return ( 안녕하세요 {props.name}!! ); } Greeting.defaultProps = { name: '리액트 네이티브', }; export default Gree.. 2023. 3. 8. [React Native] 2-2 Props [리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다. Props는 properties를 줄인말로 컴포넌트의 속성을 의미합니다. Props를 사용하면 컴포넌트를 사용할 때 임의의 값을 넣어줄 수 있습니다. Greeting 컴포넌트에 name 이라는 Props를 추가하겠습니다. import React from "react"; import {View,Text} from "react-native"; function Greeting(props) { return( 안녕하세요 {props.name}!! ) } export default Greeting; 함수에서 props라는 파라미터를 설정한뒤, 기존 '함수 컴포넌트'가 있던 부분을 {props.name}으로 감싸주었습니다 JSX에서 자바스크립트.. 2023. 3. 8. [React Native] 2-1 나만의 컴포넌트 만들기 [리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다. 프로젝트 디렉터에 components라는 디렉터리(경로)를 만들고 그 안에 Greeting.js파일을 생성 한다. components/Greeting.js import React from "react"; import {View,Text} from "react-native"; function Greeting() { return( 안녕하세요 함수 컴포넌트!! ) } export default Greeting; 위와 같이 함수형태로 만드는 컴포너느는 함수 컴포넌트라고 부릅니다. 함수로 선언한 컴포넌트에서는 이와 같이 XML형태로 이루어진 내용을 반환해줘야 합니다. 위 문법은 JSX문법인데 조금 뒤에서 설명할 것 입니다. 이후 App 컴포.. 2023. 3. 8. 이전 1 2 3 4 5 6 7 ··· 14 다음 반응형
