2/React Native
-
[React Native] React Navigation 설치 및 사용법 (cli, typescript)2/React Native 2023. 9. 27. 14:19
yarn add @react-navigation/native \ react-native-screens \ react-native-safe-area-context \ @react-navigation/native-stack 일단 기본적으로 필요한 의존성들을 설치해 준다. 그 후 꼭 pod install 을 해주어야 한다! 근데 나는 createNativeStackNavigator 가 아니라 createStackNavigator 를 사용하고 싶었기 때문에 아래를 추가로 설치해 줬다. yarn add react-native-gesture-handler \ @react-navigation/stack createNativeStackNavigator 를 쓰는 게 아니라면 의존성을 삭제해도 되는 건지... 그걸 잘 모..
-
[React Native] styled-components 설치 (cli, typescript)2/React Native 2023. 9. 27. 11:27
매번 검색하면서 하다가 이제 대충은 알지만 그래도 내가 정리하는 게 다시 보기 편할 것 같아서 정리한다. styled-components 설치 yarn add styled-components styled-components-react-native --exact styled-components 설치 시 beta 버전으로 설치되는 경우가 종종 있어서 --exact 를 통해 stable 버전을 설치하도록 했다. styled-components/native 를 설치한다는 글들이 있는데, 아니고 styled-components-react-native 가 맞다. yarn add @types/styled-components @types/styled-components-react-native -D 타입이 포함되어져 있..
-
[React Native] 조건부 스타일 (StyleSheet, 상속, 배열)2/React Native 2023. 9. 13. 16:03
강의를 보면서 조건부 스타일링을 하는 것을 보는데, 분명 style 은 객체를 받도록 되어있는데 배열을 사용하는 것이 이상해서 알아보고 아는 만큼만 정리한다. React Native - style 속성 리액트 네이티브를 처음 접했을 때 style={fontSize: 14} 와 같이 입력하고 왜 안되지? 했던 기억이 있다. style 속성은 객체를 받기 때문에 style={{fontSize: 14}} 와 같이 객체를 넣어줘야 한다. 그래서 style 객체를 따로 선언해서 넣어주고자 할때는 아래와 같이 사용한다. const styles = StyleSheet.create({ container: { backgroundColor: 'red', }, }); const App = () => { return ... ..
-
[React Native] eslint 와 prettier 설정 (+타입스크립트)2/React Native 2023. 9. 13. 15:27
처음으로 자바스크립트를 사용하게 되면서 eslint 라는 것을 접하게 되었는데, 아직도 완벽하게 이해는 못하고 있지만 아는 만큼 정리를 해보고자 한다. eslint 란? 코드에 문제가 있는지 알려주는 플러그인이라고 생각하면 되는 것 같은데, eslint 에 의해 나타나는 경고나 에러는 반드시 컴파일 시에 나타나는 에러와 관련이 있지는 않다. eslint 라는 것은 그래서 프로젝트 내에서 지키고자 하는 규칙과 관련이 있다고 볼 수도 있다고 생각한다. 예를 들자면 리액트에서 함수를 function 으로 선언하도록 eslint 로 정함으로써 const 로 함수 선언 시 에러가 발생하여 규칙을 지키도록 할 수 있다. prettier 란? 코드 포매터 (code formatter) 라고 일컫는 것 같은데, 말 그..