- state(상태) : 앱에서 바뀌는 data - createStore에는 reducer를 인자로 넣어야하는데, 이때 reducer는 무조건 함수여야함 - reducer : data를 수정하는 함수 - reducer에서 return 하는 것이 countStore에 저장됨 - countStore.getState를 통해 reducer에서 리턴한 값을 가져올 수 있음
#1.2 Actions - redux에서 함수를 부를 때 쓰는 두 번째 파라미터(인자) - action을 통해서 reducer와 소통함 - action은 object여야함
(ex) {type: "ADD"}) - countStore.dispatch(액션)를 통해서 reducer에게 action을 보낼 수 있음
#1.3 Subscriptions - countStore을 console.log로 보면 subscriptions라는 함수를 볼 수 있음 - store안에 있는 변화들을 알 수 있게 해줌 - countStore.subscribe(함수) -> countStore에 변화가 생기면 즉, store에 변화가 생기면 함수를 실행함.
#1.4 Recap Refactor
(전체 순서) 1. 현재 createStore(CountModifier)을 통해서 CountModifier 이라는 store(함수)을 만들고 그 걸 countStore이라는 변수에 저장함. 2. Add 버튼을 클릭하면 add.eventListener를 통해 handleAdd 함수가 실행됨. 3. handleAdd 함수에서 countStore.dispatch()를 이용해 countStore에 {type: "ADD"} 라는 action을 CountModifier에 보냄 4. CountModifier에서는 현재 default count가 0인 상태에서 {type: "ADD"} 인 action을 보고 count + 1 을 리턴함. (즉 count = 1이 되고 return 1;) 5. 2에서 눌린 버튼으로 인한 변화가 감지되고 countStore.subscribe(onChange) 함수를 통해 onChange 함수가 실행됨. 6. onChange 함수에서 countStore.getState()를 통해 return 값을 가져오고(4에서 return 1;) 그걸 number.innerText로 설정하여 html 상에서 0을 1로 변화시킴 - 대부분 reducer안에서는 switch 문을 사용
* ScrollView 내부에 컴포넌트와 뷰들을 자식으로 담을 수 있는, 화면의 스크롤을 사용할 때 쓰는 컴포넌트 - 스크롤 방향은 horizontal을 통해 가로 또는 세로로 변경 - contentContainerStyle={{styles.변수}} - pagingEnabled 속성으로 페이지처럼 만들 수 있음 - showsHorizontalScrollIndicator={false} 로 스크롤 바를 없앨 수 있음. - indicatorStyle="white"으로 스크롤바의 색상을 변경할 수 있음(ios에서만 작용)
* Location - expo install expo-location 입력 - Location.requestForegroundPermissionAsync()으로 유저에게 위치 접근 권한 동의 알림창 보여줌 - Location.getCurrrentPositionAsync()으로 user의 위도와 경도를 알아냄. - Location.reverseGeocodeAsync()으로 위도와 경도를 이용해 주소를 가져옴. - openweatherorg의 api를 이용해 날씨를 가져옴
* toFixed() ex) (12.12).toFixed(1) -> 12.1
* expo/vector-icons - icons.expo.fyi 사이트에 가면 아이콘 확인 가능
* react native에만 있는 속성 - paddingVertical - paddingHorizontal
* button 관련 컴포넌트 ① TouchableOpacity - 누르는 이벤트를 들을 준비가 된 View - 터치하면 래핑된 View의 opacity가 감소하여 흐리게 표시됨 - View가 터치에 적절하게 반응하도록 하는 래퍼
② TouchableHighlight - 클릭한 요소의 배경색이 바뀌도록 함 - underlayColor
원하는 배경색을 설정할 수 있는 속성 - onPress
유저가 Touchable을 눌렀을 때 실행되는 이벤트
onPress={이벤트명} - onLongPress
유저가 Touchable을 길게 눌렀을 때 실행되는 이벤트
③ TouchableWithoutFeedback - Touchable 컴포넌트이고 화면의 가장 위에서 일어나는 탭 이벤트를 듣는 컴포넌트 - UI 변화를 보여주지 않음
④ Pressable - disable 속성 있음 - hitSlope 속성 : 요소 바깥 어디까지 탭을 누르는 것을 감지할 것인지 정할 수 있음
* text input 관련 속성 - placeholder - onFocus 화면을 터치하면 쓸 준비가 된 상태 - onChangeText : 입력한 Text를 받을 수 있음 - keyboardType 종류 : number-pad, email-address 등 - returnKeyType 종류 : send, next, done, go 등 -> 키보드의 return 버튼 상태를 변경할 수 있음 - returnKeyLabel(안드로이드만) : return 버튼에 쓸 text를 마음대로 정할 수 있음 - secureTextEntry : 글씨가 안보이고 ●으로 보임 - multiline : 한 줄 이상 쓰는 경우에 사용 - autoCapitalize: 대문자를 지정 - sentences: 첫 글자가 대문자로 입력됨 - words: 다 대문자로 입력됨 - onSubmitEditing : 완료 버튼 눌렀을 때 발생하는 이벤트(함수)
* object assign : object를 가져다가 다른 object와 합쳐주고 새로운 object를 리턴
* Object로 map 쓰는 법 - Object.keys(object 이름) => key들을 array로 반환 - 즉 Object.keys(object 이름).map()으로 사용
* AsyncStorage - 다운 expo install @react-native-async-storage/async-storage - 사용 await AsyncStorage.setItem(key, value) 이때 value는 string 형태
