[React] 다크모드버튼, 카운트버튼 만들기

React 다크모드버튼, 카운트버튼 만들기

 

온라인 코딩툴 사이트 : https://snack.expo.dev/

 

---

 

package.json

{
  "dependencies": {
    "expo-constants": "~13.2.4",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "prop-types": "15.7.2",
    "styled-components": "4.2.0"
  }
}

 

Counter.js

import {useState} from 'react';
//import 2개이상일 경우 중괄호 {}
import {View, Text} from 'react-native'; 
//외장컴포넌트를 가져다 씀 (import)
import MyButton from './MyButton'; 

//()매개변수 없음
const Counter = () => {

  //useState 는 변수(데이터)를 담는 그릇(통)
  //count 변수명으로써 데이터의 key값이고 count를 호출하면 value가 출력 (key:value)
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);

  return (
  
    //항상 컴포넌트의 디자인(UI)를 출력하려면 view 내장 컴포넌트를 사용
    //Item View에서 자식노드를 칭하는 단어
    <View style={{alignItems : 'center'}}>
    <Text style={{fontSize: 20, margin : 10}}>현재숫자 : {count}</Text>
    <Text style={{fontSize: 20, margin : 10}}>더블숫자 : {double}</Text>
     
    <MyButton 
      title = "+"  
      onPress={() => {
      setCount(count+1);
      setDouble(double+2);
    }}></MyButton>
    
    <MyButton 
      title = "-" 
      onPress={() => {
      setCount(count-1);
      setDouble(double-2);
    }}
    />
    </View>
  );
};


export default Counter;

<MyButton title = "+" onPress={() => { setCount(count+1); setDouble(double+2); }}></MyButton>
onPress MyButton을 누르면
() 매개변수없이 실행
=>화살표함수로써 축약식으로 {}중괄호 내용이 실행
MyButton의 속성은 +로 지정하는 title설정

 

 

MyButton.js

import {TouchableOpacity, Text} from 'react-native';
//react-native는 내장함수로써 별도 라이브러리를 다운받지 않아도 사용 가능
//TouchableOpacity iOS 에서 외부에 받는 입력장치를 연결해주는 객체
import PropTypes from 'prop-types'; 
//prop-type은 외장라이브러리로 다운을 받아야함


//pros 매개변수
const MyButton = props => {
  return (
    //TouchableOpacity 내장 컴포넌트 함수안에 style 속성에 속성값을 넣음
    <TouchableOpacity
    style={{
      backgroundColor : 'red',
      padding : 20, 
      margin : 10, 
      borderRadius : 10 
    }}
    onPress = {() => props.onPress()}
    >
    
    <Text style={{ color : 'yellow' , fontsize : 30}}>
    {props.children || props.title}
    </Text>

    </TouchableOpacity>
  );
};

//key : value 로 데이터 세팅
MyButton.defaultProps = {
  title: 'Button' 
}

export default MyButton;
//함수(클래스)를 외부와 연동하려면 기본적으로 import / export 필요
//(자바와 접근제한자 유사)

 

javascript(react)는 모든것이 object(객체) 한개로만 구성되어있음
자바의 필드와 필드값을 외부에서 선언하고 바로 넣을 수 있음

 

App.js

import {View} from 'react-native';
import Counter from './components/chapter03/Counter';
//theme.js에 있는 변수 lightTheme 혹은 darkTheme 변수는 App.js에서 데이터로써 저장이 필요함
import { useState } from 'react';
import { Switch } from 'react-native'; //스위치 버튼 UI함수
//전체 UI이미지 명령체계
import styled, { ThemeProvider } from 'styled-components';
import {lightTheme, darkTheme} from './theme'; 


const Container = styled.View`
  flex: 1;
  background-color: ${props => props.theme.background}
  align-items: center;
  justify-content: center;
`;

const App = () => {
  //isDark boolean값으로 true, false 값을 넣음
  const [isDark, setIsDark] = useState(false);

  //_toggleSwitch 메서드는 이벤트가 발생했을 때 (메서드 실행) setIsDark메서드를 실행하고, 실행 값은 현재 변수에 할당된 isDark의 !반전으로 변경
  const _toggleSwitch = () => setIsDark(!isDark);

  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <Switch value={isDark} onValueChange={_toggleSwitch} />
        <Counter />
      </Container> 
    </ThemeProvider>
  )
}

export default App;

ThemeProvider 하위 노드의 모든 상태값과 속성을 관리해주는 객체
Container view 컴포넌트 속성을 갖고 있는 사용자 정의 변수로
props의 상태 데이터 값을 갖고 와서 styled 설정 (css)

Switch UI컴포넌트로 onValueChange 상태값이 변경 되면 (버튼 클릭하는 기본 이벤트)
_toggleSwitch 메서드가 실행됨
_toggleSwitch는 setIsDark 메서드가 실행되고 인자값은 isDark를 반전 값으로 할당되어
전체 배경 이미지가 변경 됨

 

theme.js

export const lightTheme = {
  background: '#ffffff',
  text: '#ffffff',
}

export const darkTheme = {
  background: '#34495e',
  text: '#34495e'
}

 

출력화면