Realtime database에서 지정한 임의의 key값을 얻어 변수 설정 및 CRUD하는 법

1. 목적

(CRUD가 목적이라면, 2번부터 보셔도 무방합니다.)

: 알게되는 과정에서 무수한 시도와 시간을 소모했고,

구글링과 StackOverflow에서 찾을 수 없었다.

몇몇 성공 사례는 있었지만, 나같은 초보자가 쉽게 적용하기엔 이해하는 과정부터 어려웠다.

때문에 국내 초보 개발자들이 손쉽게 이해하고 적용 할 수 있는 가이드를 마련하고자 따로 작성하고자 한다.

아래의 파란색 like는 필자가 사용한 최상위 key값이다.

검은색은 필자가 expo-constants로 추가 경로를 만들어 사용하기에 생성된 것이므로, 일반 사용자는 없을 것이니 무시.

빨간색이 얻고자 하는 key값이다.

예시 이미지 : realtime database

---------------------------------------------------------------------------------------------------------------------------------------

 

2. Realtime database에서 임의의 key값들 모두를 추출하는 방법

   (주석을 지우고, 변수와 setState만 본인 취향에 맞게 사용하시면 됩니다.)

 ㄱ. 우선 useEffect를 통한 firebase API를 작용시킨다.

       여기서 나는 기본제공 firebase API대신, on() 메소드로 수정한 API를 사용했다.

 ㄴ. 아래의 변수이름은 그냥 아무거나 본인 취향대로 영어로 작성하자.

 ㄷ. 이렇게 작성하고 console.log(randomKey)하면, 터미널에 모든 키값을 찍힌다.

 ㄹ. useState의 이름은 본인 취향대로 설정하면 된다.

 ㅁ. 경로를 설명하자면, firebase의 키값에 있는 value값을 전부 받아온다.

       이는 {임의의키값:저장시킨데이터}의 json data로 되어있다고 보면 된다.

       이를 snapshot형식으로 받아온 것인데 snapshot으로 받아와야 iOS에서도 호환이 된다.

       여기서 우리는 key값만 필요하므로, Object.keys() 문법을 이용해 key값만 받아온 것이다.(on()밖에서 하면 안됨)

	const [randomKey, setRandomKey]

	useEffect(() => {
        setTimeout(() => {
            setLoading(true); // 로딩화면을 위한 useState이다. useEffect 밖에 useState로 따로 const해주자.
            firebase_db
                .ref(`/realtime database내의 최상위 키값`)
                .on('value', (snapshot) => {
                    const 변수이름 = (snapshot.val());
                    setRandomKey(Object.keys(변수이름)) // 이 부분이 데이터 내 모든 realtime database keys 받아오는 useState
                    setLoading(false); // useEffect에서 원하는 값이 불러와지면, 로딩을 끝내기 위함
                })
        }, 300)
    }, []);
    
    console.log(randomKey)

 

 

3. 추출한 key값들 중 하나만 선택해 얻는 방법

  : 그냥 뒤에 [숫자]로 해당 key값의 순서만 입력해주면 된다. (단, 순서는 index처럼 0부터 시작한다.)

console.log(randomKey[숫자])

 

 

4. FlatList에서 선택한 항목의 key값을 얻는 방법

 : 사실 이 부분이 가장 난해했던 부분이다. FlatList에서 선택한 item의 순서값과 realtime database에서의 순서값은 엄연히

   다르기 때문에, 직접 index를 매칭해줘야하기 때문이다.

 ㄱ. 우선 FlatList를 작성한다. 데이터는 2번 과정으로 받아온 데이터를 사용한다.

      여기서 FlatList의 index값을 설정하고, 외부로 내보내 주는 것이다.

return (
	...
    <FlatList
    	data={state} / state는 useState를 이용해 firebase API를 통해 얻어온 데이터 변수다. 따로 useState를 const하여 가져오면 된다.
        ...
        // 아래의 props 선언에서 item과 index를 선언해줬다.
        // item은 state라는 data를 받아줄 변수다.
        // index는 FlatList에 나타내는 컨텐츠들의 위치순서다.(0부터 시작)
		renderItem={({ item, index }) => (
        	<View>
          	  <TouchableOpacity onPress={() => onPress({ item })}>
				<Image source={{ uri: 이미지 경로.url }} />
                //선택할 컨텐츠르 가시화시키기 위해 이미지경로를 예로 들었다. 본인 취향에 맞게 하심됨니다.
				<View>
					...
					<Text style={styles.cardDate}>{index}</Text>
                    // index번호를 보면서 확인하기 위함이다. 없어도 무방하다.
				</View>
                // TouchableOpacity 하위 View에 있어야 선택한 컨텐츠의 index값을 받아올 수 있다.
            	<View>
        			<Pressable onPress={() => 함수이름({ index })} />
                    // onPress를 이용해 외부에 선언할 함수실행을 연결해주고, {index}를 태워보내주자.
                </View>
                ...
       	      </TouchableOpacity>
			</View>
    />

 ㄴ. 선택한 item에 해당하는 realtime database내의 임의의 키값을 얻는 방법

    function 함수이름({ index }) {
        console.log(randomKey[index])
        // 본인이 선택한 item에 해당하는 key값이 터미널에 잘 찍히는지 확인하기위함. 없어도 무방하다.
    }

 

 ㄷ. 선택한 item에 해당하는 데이터를 CRUD하는 방법 (필자는 삭제 기능이 필요해서 remove를 설정했다.)

    function 함수이름({ index }) {
        let selectedKey = randomKey[index]
        // 선별한 하나의 key값을 치환해준 것이다.
        firebase_db.ref(`/최상위key값/${selectedKey}`).remove()
            .then(() => { Alert.alert('<찜 해제 완료>'); })
        // 필자는 해당 값에 있는 데이터를 지우기 위해 고안했기때문에 remove()메소드를 넣었다.
        // 즉, realtime database >> 최상위 key값 >> 선택된 임의의 key값 순으로 경로를 찾아내는 것이다.
    }