ReactNative23 [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 다음 반응형
