[Raact-Native] 조건부 렌더링, 리액트처럼 라우터 기능 구현하기

 

react native로 열심히 개발을 하던 도중에 난관에 부딪혔ㄷ ㅏ

 

리액트에서는 페이지 라우터가 있어서 렌더링 할 때 조건부로 렌더링이 가능했는데 

리액트 네이티브에서는 스택으로 쌓이는 형태라 스택을 다시 나오는 방법을 모르겠어서 (내가 못 찾은 걸 수도...) 조건부 렌더링이 쉽지 않았다!

내가 원하는 건 토스 처럼 매끄러운 화면 전환 + 하단 네비게이션 바가 고정된 채 컴포넌트들만 렌더링 되는 거!

하지만 스택으로는 새로운 페이지가 자꾸 옆에서 튀어나오고... 네비게이션 바를 가리고... 그런 상황이 발생했다

 

해결 방법

-> home네비게이션에서는 home.js만 두고 그 안에서 렌더링에 조건을 달아 조건부 렌더링을 하자!

---

 

조건부 렌더링 하는 방법

 

1. retuen 안에서 삼항 연산자 쓰기

return (
    <View>
      {showSecondHome ? (
        <SecondHome />
      ) : (
        <Merge onActivitySave={navigateToSecondHome} />
      )}
    </View>
  );

 

여기에서 Merge와 SecondHome은 

const SecondHome = ({ SecondonActivitySave }) => {

 

 

이런 식으로 화살표 함수로 기록, 페이지 전환 상태를 확인하기 위해 SecondonActivitySave를 인자로 넣어준다!

저 함수는

1. 페이지 전환 버튼이 눌렸을 때 실행되고

2. 실행 되면 false -> true로 바뀌면서

3. home.js에서 true로 변경시 SecondHome이 렌더링 되는 방법!

 

// SecondHome.js

const SecondsaveActivity = () => {
        SecondonActivitySave();
        // 활동 저장 로직
      };
      
...

		<ActivityBtn
        onPress={SecondsaveActivity}
        ></ActivityBtn>
        // 버튼 클릭시 false -> true

 

// home.js

  const [showSecondHome, setShowSecondHome] = useState(false);
  
  const navigateToSecondHome = () => {
    setShowSecondHome(true);
    
  };

  useFocusEffect(
    React.useCallback(()=>{
      setShowSecondHome(false);
    }, [])
  );

 

이렇게 home.js에서 자식 상태 관리를 해주는 로직도 추가해야함!

useEffect로 홈 네비게이션 바를 누를 때 마다 다시 false도 해줌~

 

 

2.return에 boolean과 && 연산자 사용하기

  const [showSecondHome, setShowSecondHome] = useState(false);
  
	...
    
  const navigateToSecondHome = () => {
    setShowSecondHome(true);
    setShowThirdHome(false);
  };
  
	...
    
return (
    <View>
      {showSecondHome && (
        <SecondHome SecondonActivitySave={navigateToThirdHome} />
      )}
      {showThirdHome && (
        <ThirdHome onActivitySave={() => {
          setShowSecondHome(false);
          setShowThirdHome(false);
      }} />
      )}
      {!showSecondHome && !showThirdHome && (
        <Merge onActivitySave={navigateToSecondHome} />
      )}
    </View>
  );

 

이런 식으로 n번째 페이지들이 열리는 값을 true,false 형태로 useState를 이용해 상태를 쓴다!

각 페이지들의 true, false를 관리만 해주고 return할 때는 true인 상태일 때 각 페이지를 렌더링 해주는 식으로 코드를 작성했다

 

1 방법에서 2 방법으로 바꾼 이유

삼항연산자를 쓸 때는 페이지가 두 개여서 쉬웠는데 변경해야 하는 홈의 페이지만 3개로 늘어나서 삼항연산자 안에 또 삼항연산자를 써야하고 이런 식으로 중첩 문제가 발생했고 쓴다고 해도 코드가 알아보기 어려워져서 다른 방법을 찾다가 그냥 ture, false를 이용하기로 했다! 

학교에서 과제 할 때 true false 죽어라고 많이 썼는데 오랜만에 봐서 반가와요 상태엿다

웅 그냥 잡담이엉ㅅ어

 

---

 

결론 ㅎㅎ

문제 : 네비게이션으로 페이지 이동 시 하단 네비게이션 고정이 안 됨!

• 고정하는 방법은 따로 없는 것 같다! 만약에 있다고 해도 뭔가 페이지가 넘어가는 모습이라 별로 내가 원하던 페이지 이동이 아님! 토스 같이 자연스럽게 넘어가는 모습을 원한다…컴포넌트를 전부 다시 그려서 페이지가 이동하는 것 처럼 보이게 하면 될 것 같다! 그리고 이렇게 해야 컴포넌트 분리작업도 잘 진행될 것 같고 이래야 리액트의 장점을 살린 개발이 될 것 같은 느낌쓰,,,→ 페이지 라우팅은 모달 창 대신 쓰거나...

해결방법 : 페이지 라우팅 대신 컴포넌트 리렌더링으로 페이지 이동을 구현하자!