[챕터 2-2] 카운터

 

컨테이너 구성 : 타이틀 컨테이너, 카운터 컨테이너, 버튼 컨테이너

 

기능

+ 버튼을 누르면, 숫자 증가

- 버튼을 누르면, 숫자 감소

 

---

버튼 컴포넌트

1) 아이콘 다운로드 링크

https://material.io/tools/icons/?style=baseline

Resources

 

2) 이미지 다운로드

add_circle (+)

remove_circle (-)

(*) 클릭해서 18dp라고 표시된 부분을 선택하여 iOS 나 안드로이드로 변경하고 다운로드한다. 

4) src/Assets/Images/ 폴더 생성 후, 다운로드한 이미지 격납

- (+) : add.png, add@2x.png, add@3x.png

- (-) : remove, remove@2x.png, remove@3x.png

  로 이름을 변경하여 복사

 

귀찮으면, 바로 직접 여기 다운로드해서 사용

add.png

0.00MB

add@2x.png

0.00MB

add@3x.png

0.00MB

remove.png

0.00MB

remove@2x.png

0.00MB

remove@3x.png

0.00MB

 

 

---

버튼 컴포넌트 인덱스 ts파일 생성

 

src/Components/Button/index.tsx

 

import React from 'react';
import Styled from 'styled-components/native';
const Container = Styled.TouchableOpacity``;
const Icon = Styled.Image``;
interface Props {
  iconName: 'plus' | 'minus';
  onPress?: () => void;
}
const Button = ({iconName, onPress}: Props) => {
  return (
    <Container onPress={onPress}>
      <Icon
        source={
          iconName === 'plus'
            ? require('~/Assets/Images/add.png')
            : require('~/Assets/Images/remove.png')
        }
      />
    </Container>
  );
};
export default Button;

---

카운터 컴포넌트

 

src/Screens/Counter/index.tsx 파일 생성

 

import React, {useState} from 'react';
import Styled from 'styled-components/native';
import Button from '~/Components/Button';
const Container = Styled.SafeAreaView`
 flex: 1;
 background-color: skyblue;
`;
const TitleContainer = Styled.View`
 flex: 1;
 justify-content: center;
 align-items: center;
 background-color: yellow;
`;
const TitleLabel = Styled.Text`
 font-size: 24px;
`;
const CountContainer = Styled.View`
flex: 2;
 justify-content: center;
 align-items: center;
 background-color: blue;
`;
const CountLabel = Styled.Text`
 font-size: 24px;
 font-weight: bold;
`;
const ButtonContainer = Styled.View`
 flex: 1;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;
 background-color: green;
`;
interface Props {
  title?: string;
  initValue: number;
}
const Counter = ({title, initValue}: Props) => {
  const [count, setCount] = useState<number>(0);
  return (
    <Container>
      {title && (
        <TitleContainer>
          <TitleLabel>{title}</TitleLabel>
        </TitleContainer>
      )}
      <CountContainer>
        <CountLabel>{initValue + count}</CountLabel>
      </CountContainer>
      <ButtonContainer>
        <Button iconName="plus" onPress={() => setCount(count + 1)} />
        <Button iconName="minus" onPress={() => setCount(count - 1)} />
      </ButtonContainer>
    </Container>
  );
};
export default Counter;

 

---

앱 (App.tsx )

./src/App.tsx 

 

import React from 'react';
import Styled from 'styled-components/native';
import Counter from './Screens/Counter';
const Container = Styled.View`
 flex: 1;
 background-color: #EEE;
`;
const App = () => {
  return (
    <Container>
      <Counter title="This is a Counter App" initValue={5} />
    </Container>
  );
};
export default App;

---

실행 환경설정

Run - Edit Configuration - React Native 추가

(*) 이미 되어있으면 필요없음

 

---

카운터 앱 소스파일

(*) 데이터 영구 유지보존

src.zip

0.01MB

 

---

카운터 앱 소스파일 : 컨텍스트 사용

(*) 데이터 영구 유지보존

src.zip

0.01MB