RN - Navigation

Navigation actions are handled by current navigator and bubble up if couldn't be handled#

Home 컴포넌트에 "Feed"서 "Messages" 갈때 navigation.navigate()는 Tab.Navigator 사용되는데, 만약 "Feed"서 "Home" 컴포넌트로 갈때 navigation.navigate() 사용하면 Stack.Navigator의 navigate()가 사용된다. (자동적으로 편한듯)

다른 stack의 screen으로 navigating 하고 싶은데, 그 stack의 initialScreen 이 아닌 특정 screen으로 이동하고 싶을때.

위의 경우
Here, you might want to navigate to the Root stack from your Home component:

navigation.navigate('Root', { screen: 'Settings' });
첫번째 파라미터는 stack, 두번째 {screen: 가고싶은 스크린} 적어주면 된다

팝업 vs 모달 차이

팝업창 : 창 + 창, 창 위에 창 띄우는 것.
요즘엔 안씀. 사용자 괴롭힘
모달 " 기존의 창에 레이어 하나 더 씌우는 것. 가볍고 좋음. 코딩이 조금 더 걸림 팝업보단.

출처: https://bomango.tistory.com/57

?? double question mark

let data =null;

const foo = data ?? 'default string';
console.log(foo);

//결과 : "default string"

?? 의 좌측 데이터가 null이면, 우측 값을 반환 할당함.
null이 아니면 data 값을 할당.

nested navigation 구조 시, and 부모 navigation에 header가 있을시 주의할점.

-> stack
--> (child)stack 에서 child stack 에 navigate()를 통해 이동시 부모 stack 의 header에선 title이 변경되지 않는다.
왜냐면, 부모 stack은 이동이 없었기 때문에.. (자식 stack navigate()가 호출되었기에.)
title 뿐만 아니라 goBack button 또한 생성 되지 않는다. (같은 이유로)

-> 따라서 헤더가 필요하지 않은 (분류하자면 자식 단의) page의 경우 goBack버튼의 헤더가 필요, 또한 title 변경을 "손쉽게"처리하려면 부모 stack에 (논리적 구조로는 자식단의 분류되더라도) 페이지를 생성하는 것이 좋다(논리)

touchableWithoutFeedback import시 주의

import {
TouchableWithoutFeedback
} from 'react-native'; vs
import {
TouchableWithoutFeedback
} from
'react-native-gesture-handler';
주의: rn gesture 사용시 css 다깨짐

Text에 textAlign = 'center' 등이 안먹힐때

상위 View에 width 100%를 안주면 하위 <Text> 컴포넌트는 딱 아이템 크기 만큼의 크기만 지정되므로 자체 align 속성인 textAlign 사용이 불가하다

아래 text에 borderWidth:1 을 줘서 테두리를 줬더니 글자주변만 공간이 생김.

코드는 이럼

보다 시피 MenuText의 textAlign='left' 속성을 주더라도,
상위 컴포넌트가<></>로 닫혀 있어 width가 딱 아이템 크기로 지정 됨
따라서 wrapper로 width:100%를 준다면?

적용된다.
즉 textAlign 또는 justifyContent 같은 속성을 사용하려면 상위 div 태그에 해당하는 View의 width가 100% 지정 되었는지 확인하자

리액트 네이티브(React Native) 안드로이드 키보드(Keyboard)에 따른 화면 변경 -> 키보드가 UI 깰때

아래 처럼 변경 adjustResize -> adjustPan

출처: https://gran007.tistory.com/entry/리액트-네이티브React-Native-안드로이드-키보드Keyboard에-따른-화면-변경 [JLee's Blog]

빈공간 클릭시 키보드 내리기

<TouchableWithoutFeedback onPress={Keyborad.dismiss} > </... 사용하면 되는데 안되는거였다(?)

위처럼 한개 view를 child로 덮어줘야 함.
즉 <Touchable.. 자식으로 cutomized my component 가 들어가면 안됨.
https://stackoverflow.com/questions/53573038/react-native-onpress-with-touchablewithoutfeedback-is-not-working#comment94010961_53573038

그런데

<Touchable..> 
  <View>...마이컴포넌트.. </View>
</Touchable..> 

처럼 만들어주면 UI가 다 깨진다.
따라서 <View style={{flex : 1}}> </.. 식으로 flex:1을 지정해줘야 됨.

https://github.com/facebook/react-native/issues/10180

reduce 사용법 (최신 createSlice)

1.createSlice로 name, initialState, reducers 만들어 주고
export를 2개 해주는데, xxxx.reducer랑 xxxx.action;

2. export 해준 action은 dispatch 사용할 곳에 import 한 뒤에 dispatch안에 함수 호출 상태로 넣어주면 됨(파라미터 필요시 삽입)
   

reducer는 아래처럼 configureStore에 모든 reducer들을 묶어 등록해주면 됨

useSelector()원리

useSelector 원리 검색하면 아래처럼 나온다

useSelector는 함수 컴포넌트가 렌더링 될때와, action이 dispatch될 때 작동한다.
action이 dispatch 되면 useSelector는 이전 결과값을 비교하고,
"다를 때에만 강제로 리랜더링" 한다.

즉 위의 과정을 쉽게 순서로 간단하게 정리하면
1. redux를 사용하고픈 자리에 dispatch(액션함수())
이렇게 호출하면 ex)

dispatch(setUser(id));

2.dispatch는 작동하면 setUser가 호출되면 리덕스 모듈.ts 부분에서

export const useSlice = createSlice({
.....
  reducer:{
  setUser(state,action){
	state.id = action.payload.id;
	}}
})

처럼 reducer가 작동해 id 값을 변경해 App 전체적인 store의 state 값을 변경해 줄 것이며

const state = useSelector((state) => state.user.id);

3. 그럼, 위 코드에서 useSelector를 호출한 functional 컴포넌트 에서 state값 비교가 시작된다. 여기서 (state)는 정확히 말하면 store를 가리킨다. (아래 출처 보면 useSelector의 파라미터 state는 store 값으로 보는게 맞다고 한다) 즉 store의 바뀐 state.user.id 값을 확인하고 해당 함수 컴포넌트 페이지를 전체 리랜더링 해주는 원리다. id 값이 변경되지 않으면 리랜더링이 없겠지.

추가 유의점 : 그런데 만약 아래처럼 받는다면

const {id, name} = useSelector((state) => state.user);

id, name이 객체를 생성하는 방식으로 받기 때문에 만약
다른 reducer

const bleState = useSelector((state) => state.bluetooth)

위와 같이 bluetooth 리듀서의 값을 변경하였다 하더라도 id, name의 컴포넌트는 리랜더링이 되버린다. 이유는 객체 생성 방식이 새로운 생성이라 값 비교 이전에 다른 주소값으로 다르게 인식해버리기 때문.
따라서 다른 reducer의 값 변동이 영향을 끼치지 않게 하려면
받을때 무조건 분리! (Don't use 객체 구조 할당 방식! )
해서 사용하면 된다 요렇게

const id = useSelector((state) => state.user);
const name = useSelector((state) => state.user);

https://velog.io/@seungsang00/210406TIL#useselector-%EC%9E%91%EB%8F%99%EC%9B%90%EB%A6%AC

parents => children 컴포넌트로 props 받을때 객체 구조화 과정 혼동.. 객체 실수

props 객체로 아들 컴포넌트에선 받기 때문에 {} 늘 상 사용하던 객체 구조화 과정 떔에 혼동되기 쉬움.