[리액트네이티브] react-native 값 다음 컴포넌트로 전달하기 (Expo)

1. 보내는 페이지와 받는 페이지 함수 부분에 props를 선언해둔다(***중요***)

ex) const PageName = (props) =>{ .... 이거나 export default function PageName(props) { ....

 

2. 데이터가 존재하면서 다음 페이지에 값을 보내고 싶다면 아래 코드로 이벤트와 동시에 보내주면 된다.

navigation.navigate('다음 페이지', { 데이터 키값 : 데이터 값 })

 

3. 데이터를 받는 다음 페이지에서는 값을 props로 읽어 오면된다.

props.route.params.데이터 키값

 

 

---

 

 

 

react에서는 흔히 props라고 하는 것을 실행할 것이다!

 

참고는 아래에서 찾으면 된다

https://reactnavigation.org/docs/navigation-prop/

React Navigation

 

 

이 페이지를 찾아보면서 자주 보고 구글링도 많이 하고 모두 실행해 보았다

​

결국엔 이 페이지에서 답을 찾았다!

​

setParams와 setOptions로 답을 찾았다

 

function HomeScreen({ navigation: { navigate } }) {
  return (
    <View>
      <Text>This is the home screen of the app</Text>
      <Button
        onPress={() =>
          navigate('Profile', { names: ['Brent', 'Satya', 'Michaś'] })
        }
        title="Go to Brent's profile"
      />
    </View>
  );
}

 

삼항연산자를 사용해서 값이 다를 때마다 확인 후 navigation 실행하는 예제 코드

function ProfileScreen({ navigation: { setParams } }) {
  return (
    <Button
      onPress={() =>
        setParams({
          friends:
            route.params.friends[0] === 'Brent'
              ? ['Wojciech', 'Szymon', 'Jakub']
              : ['Brent', 'Satya', 'Michaś'],
          title:
            route.params.title === "Brent's Profile"
              ? "Lucy's Profile"
              : "Brent's Profile",
        })
      }
      title="Swap title and friends"
    />
  );
}

 

 

이 두 가지로 사용했다

​

위에 있는 코드로 데이터를 넣었고

아래에 있는 코드로 데이터를 불러오는 값을 확인했다

​

​

map으로 태그들을 돌려 출력시켰고

해당 데이터 view를 클릭하면 detail로 화면이 전환됨

​

일단

값을 부모 컴포넌트에서 자식 컴포넌트로 보내야한다

​

중요한 부분은

두가지이다!

​

1. 처음에는 function 선언했을 때 () 안에 있는 값을 바꿔줘야 한다

export default function AnimalDetail({ navigation : {navigate}}) {
...

또 다른 함수 선언 하는 방식, 

그니까 function 형태 말구 해단 페이지에 대한 정의? js 파일을 만드는 방법 (제가 가장 많이 사용하는 방법 입니다!)

아래와 같은 코드에 대한 자세한 내용은 다음에 다시 포스팅하겠습니당

const PageName = (props) = >{
 ....
 
 return (
 	<View>
    </View>
 )
}

export default pageName;

navigation으로 값을 이동하는 것인데

navigation을 속성에 있는 navigate를 사용하는 것이다

navigate는 화면 전화할 때 사용하는 거?

위 링크를 읽어보면 좋을거 같다

 

 

2. 해당 자식 컴포넌트에 값을 보내는 코드

<Pressable onPress={() => {
    navigate("AnimalDetail",{
        info: [ e.aname, e.asex, e.abirth, e.abreed, e.aneut, ],
        title: e.aName,
    })
    // navigation.navigate({name : "AnimalDetail", key :{e}})
    // <AnimalDetail name={e}/>
    //console.log(e)
}}>

 

Pressable 태그는 클릭할 수 있는 범위를 지정해주는 태그라고 보면 된다

즉 범위가 지정되어 있는 부분을 클릭하면

onPress를 실행한다

​

onPress 안에는 navigate값이 있는데

​

따옴표 안에 있는 값은 변환할 컴포넌트,

값은 배열로 넣어주면 된다.

​

info라는 배열 명에

[ e.name, e.asex, e.abirth, e.abreed, e.aneut ]

값을 저장한다.

​

title은 없어도 된다!

​

그냥 원하는 변수명에 값을 넣어주면 된다

​

(약간 json 형식으로 변환하면 된다)

​

​

​

내가 넣어둔 값은

​

데이터베이스에서 가져온 값을 읽어올 때 사용하는 것인데

​

map을 돌려서

이벤트가 발생한 값, 값을 읽어올 json의 키값..?

보단 뭔가 있는거 같은데 설명하기가 너무 애매하다

​

json으로 저장되어 있는 변수명으로 하나하나 읽어와서 저장한 것이다.

​

​

이 값을 넣은 배열은 info라는 변수명에 저장되어 있다.

​

​

이제 다음으로 자식 컴포넌트를 보겠다ㅏ

​

​

자식 컴포넌트도 부모 컴포넌트와 동일하게 두가지만 보면 된다!

 

 

 

1. function 부분이다!

export default function AnimalDetail({ navigation , route}) {
...

 

원래는 프롭스 즉 navigation으로 받았던 다른 페이지에서 값을 보내줄때 props에 내용을 저장하는 방식이다. 

받는 것, 주는 것을 수행할 때 props를 사용한다.

 

위 { navigation, route}는 props의 자식 코드? 자식 파라미터 값인데

이를 사용할때 ()부분이 props 부분이라 꼭 선언해주던가

props를 선언한 뒤에 해당 값을 불러주면 된다.

 

위에 예제 코드인

const PageName = (props) => {
	return(
    	<View>
        	<Button onPress={ () => props.navigation.navigate("다음 페이지이름")} />
        </View>
    )	
}
export default PageName;

이렇게 사용하고

props.navigation.navigate를 사용하면된다.

 

navigation에 대해서도 다음에 포스팅 해야겠습니다ㅏㅜ

 

 

2. 읽어오는 값의 형태

일단 route라는 값에 저장되어 있는데

​

이 값을 하나하나 읽어서 출력해주면 된다

route를 그냥 출력하게 되면

{"key": "AnimalDetail-4W4_L_9mIyc0n_h26oRrL", "name": "AnimalDetail", "params": {"info": ["코코", "남자", "2020-09-05", "요크셔테리어", "남자", true], "title": undefined}, "path": undefined}

​

이렇게 값이 나온다

​

그래서 위 값을 하나하나 분리해서 읽어오는 것이다.

​

route. params. info[인덱스]

로 데이터를 읽어올 수 있다

​

​params를 읽어야 한다!

info는 navigation 하면서 값을 보낼때 지정했던 data의 key 값이다

 

코코이름이 있는 부분을 클릭하면 AnimalDetail 페이지가 보인다

코코에 대한 데이터를 넣어서 다음 페이지에서 보여줬다

​

 

 

이상으로 expo에서 props를 사용하는 형태를 알아봤다

항상 구글링해서 빠르게 찾으면 좋지만 document를 찬찬히 읽어보는 것을 추천한다!!

그래야 내가 사용하는 props는 이런 파라미터값이 있고 더 다양한 내용을 알 수 있기 때문이다