모바일 개발/React Native-이론 썸네일형 리스트형 계산기 클론코딩(2) - 결과창 만들기 1. 코드 리뷰 (1) styled component 이용하여 태그들 가독성 높이기 a. styled component 깔기 npm install styled-components b. styled component 이용하여 꾸미기 styled Component 이용하면 가독성이 좋아진다. 그 이유는 다음과 같다. 인라인 스타일로 꾸밀 경우, style 속성들을 이용해 꾸미는 내용을 적어줘야 했다. 이는 꾸미는 내용이 많아질수록 가독성이 떨어진다. StyleSheet를 이용하는 경우에는 태그들과 CSS 객체들을 연결해줘야 하는데, 이게 CSS 객체의 양이 많아질수록 헷갈릴 가능성이 높다. 스타일드 컴포넌트는 말 그대로 컴포넌트의 내용에 CSS를 첨가할 수 있는 것이다. 컴포넌트는 이름을 마음대로 할 수 있.. 더보기 계산기 클론 코딩 (1) 숫자 및 연산자 버튼 UI 개발 1. 코드 리뷰 import React from "react" import { TouchableOpacity, View, Text } from "react-native" import styled from "styled-components/native" const ButtonContainer =styled.View` flex-direction: row; width: 100%; `; //Button Type : 'reset' | 'Operator' | 'num' const Button = ({text, onPress, flex, type}) => { const backgroundColor = (type === "reset") ? COLOR.RESET : (type === "operator") ? COLOR... 더보기 계산기 예제 UseState 설정 1. 코드 리뷰 UseState만 설정 UseState는 상태를 저장하기 위한 함수 이다. 구조 분해 할당의 첫번째 인자에는 값이 저장될 변수, 두 번째 인자는 값을 바꿔주는 함수가 들어간다. useState()의 () 안은 값의 초기값이다. 처음부터 모든 UseState를 세팅하고 가려고 하면 되려 머리 아프다. 어짜피 개발하다가 필요한 것이 더 생기면, 그 때 또 추가해야 한다. 마음 편히 먹고 굵직 한 것만 일단 구현한다는 생각으로 하자. 더보기 터치범위 넓히기 1. 아이콘의 터치범위 넓히는 법 (1) View로 되어있는 icon 컴포넌트를 TouchableOpacity로 바꾼다. (2) hitslop 이용 TouchableOpacity의 hitslop 속성은 해당 아이콘의 터치 범위를 늘려준다. top, bottom, left, right의 옆에 자기가 늘려주고 싶은 만큼을 적어주면 된다. const IconButton = ({name, bgColor}) => { return( ) }; ** 곁다리 컴포넌트에서 속성을 props로 받을 경우, {} 없이 () 안에 바로 적어주면 되었다. 왜냐하면, props는 하나의 객체이기 때문이다. 오류 코들르 읽어보니 () 안에는 객체나 배열같은 구조체만 들어올 수 있는 것 같다. 위처럼 name, bgColor를 넣을거.. 더보기 컴포넌트 스타일링 1. React-Native에서 CSS 스타일링을 하는 방법이 3가지가 있다. (1) inline 스타일 이런 식으로 태그 안에다가 적어주는 것 양이 많아지면 가독성이 떨어지지만, 반대로 양이 적으면 가독성이 오히려 높다. (2) StyleSheet 써서 내용 밑으로 빼기 양이 많아질 경우, 이렇게 사용하면 가독성이 높아진다. (3) expo에서 제공하는 기능인 styled Component 사용 이건 컴포넌트인데 안에 CSS 기능을 넣을 수 있는 것이다. a.장점은 컴포넌트를 사용하는 것 이므로, 컴포넌트 이름을 내가 쓰려는 CSS에 맞게 바꿀 수 있다. 이는 컴포넌트만 보아도 해당 함수가 어떻게 꾸며질 것인지 알 수 있어 가독성이 높아진다. b. 형태 (1) styled.View 혹은 Image, T.. 더보기 Scroll View 대신 FlatList 사용해보기 1. Scroll View 와 FlatList의 차이점. ScrollView는 화면에 보이지 않는 부분도 다 랜더링하여 만들어 놓는다. 그리고 사용자가 화면에서 벗어나는 부분을 보고 싶으면, 스크롤 해서 볼 수 있게 만든다. 데이터 양이 많지 않고 고정적일 때 사용한다. 반면 FlatList는 화면에 보이는 부분만 랜더링하여 만들어 놓는다. 만약 사용자가 보이지 않는 부분을 보고 싶어 스크롤 할 시 그 때 안 만들어 놓은 내용들을 만든다. 미리 모든 내용을 만들어 놓는 Scroll View와 비교했을 때 압도적으로 좋은 성능을 보인다. 2. 코드 리뷰 (1) FlatList의 속성들 뜯어보기 index} ItemSeparatorComponent={ItemSeparatorComponent} stickyHe.. 더보기 TabBar 1. 코드 리뷰 (1) App.js export default function App() { const [isOpened, setIsOpened]=useState(true); const [selectedTabIdx, setSelectedTabIdx] = useState(0); const onPressArrow = () => { console.log("clicked arrow") setIsOpened(!isOpened) } return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: statusBarHeight, }, }); a. tabBar 제외한 모든 컴포넌트들은 view.. 더보기 친구리스트 토글 버튼 만들기 친구List를 화살표 키를 눌러 토글 시킬 것이다. 토글 시킬려면 boolean 변수를 만들고, 우리가 상황에 따라 그 값의 상태를 변화 시켜주면 된다. (useState 이용) 변화가 필요한 곳은 friendSection, friendList 2가지 장소이다. boolean 변수가 false 일때, friendSection은 화살표를 위로 보게 하고, true 일때는 아래를 보게 만들어야 한다. friednList에서 boolean 변수가 false 일 때, return 값을 null로 줘서 안 보이게 만들고 true일 때 원래 로직을 보이게 만들면 된다. 여기서 쓰이는 것이 삼항 연산자 혹은 if문, &&문 이다. 1. 코드 리뷰 (1) App.js // useState로 boolean 변수의 상태 .. 더보기 이전 1 2 3 4 5 6 7 다음
