React Native

설치

npx react-native start —reset-cache
npx react-native run-ios
npx react-native run-android

 

에러

undefined method `__apply_Xcode_12_5_M1_post_install_workaround'

• ios/Profile 에서 __apply_Xcode_12_5_M1_post_install_workaround(installer) 주석처리

Execution failed for task ':app:mergeLibDexDebug'

project.ext.react = [
    enableHermes: false,
]

android {
    defaultConfig {
        multiDexEnabled true
    }
}

dependencies {
    implementation "androidx.multidex:multidex:2.0.1"
}

import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;

@Override 
protected JSIModulePackage getJSIModulePackage() {
  return new ReanimatedJSIModulePackage();
}

 

 

Redux란?

• state를 관리하는 도구로, store라는 저장소에서 component들의 state를 관리
• redux를 사용하게 되면 모든 component에서 reducer함수와 action을 통해 state에 접근 가능
• action을 dispatch하면 reducer함수를 호출하고, reducer는 store에 가서 현재 state 값을 가져와 새로운 state 반환

React-thunk, React-saga

• 둘 다 redux의 미들웨어 라이브러리
• redux 미들웨어는 dispatch() 메소드를 통해 store로 가고 있는 액션을 가로챔
• 액션은 보통 type, payload 필드를 가지고 있는 javascript의 일반적인 객체

Styled-Components

• CSS in JS 관련 가장 유명한 라이브러리
• 공식적으로 React Native에서도 지원
• 컴포넌트를 사용할 때 넣어준 props를 스타일링 코드에서도 이용 가능
• 재사용 가능, 상속 가능
• React & React Native 간 공유 가능

import styled from 'styled-components'

// 재사용
const whiteText = css`
    color: #fff;
    font-size: 14px;
`;

const MyBoldTextComponent = styled.Text`
    ${whiteText}
    font-weight: 600
`;

const MyLightTextComponent = styled.Text`
    ${whiteText}
    font-weight: 200
`;

// 상속
const StyledText = styled.Text`
    color: #000;
    font-size: 20px;
    margin: 10px;
    padding: 10px;
`;

const ErrorText = styled(StyledText)`
    font-weight: 600;
    color: red;
`;

• 리액트 네이티브의 스타일은 오브젝트 형식을 사용하기 때문에 text-align을 textAlign 으로 사용하지만, styled-components 에서는 css와 동일하게 text-align 형식 사용

---

참고

 

• https://reactnative.dev/docs/environment-setup
• https://velog.io/@dongwon2/Redux-Thunk-vs-Redux-Saga를-비교해-봅시다-
• https://chaeyoung2.tistory.com/44
• https://github.com/handi-dev/react-native-boilerplate