다이어리 앱을 만들면서 연습해보자. - context / realm.write() / 창 닫기

이전글

처음부터 다시 해보는 npx create-react-native-app dear-diary with ios 세팅! 나만의 프리셋

다이어리 앱을 만들면서 연습해보자. - 모듈설치 /Home / Write Screen

다이어리 앱을 만들면서 연습해보자. - mongoDB 연동(Realm open/스키마 정의 하기)

다이어리 앱을 만들면서 연습해보자. - Write 화면 구현하기

 context /  realm.write() / 창 닫기 연습

context 란? 

많은 스크린이나 컴포넌트에 값을 넣게(=전달하게 )해주는 방법이다. Prop으로 전달하는 방식이 번거로울 정도로 많은 스크린이나 컴포넌트에 값을 전달해야할 때 사용

 

context 사용법

app.js 에서 context 만들기

export const MyContext = React.createContext(defaultValue);

export default function App() {  

return (
    <MyContext.Provider value={/* 어떤 값 */}>
        <NavigationContainer>
        </NavigationContainer>
    </MyContext>
)}

write.js 에서 가져와 사용하기 

# App.js 에 선언된 Mycontext를 불러오긴 하지만, 재귀참조와 비슷한 warning이 났던 것 같다.
# 다시 찾아보니 Require cicle warning 이었다. 

import { MyContext } from "../App";

const SubComponent = () => {
	const realm = useContext(MyContext);
...
}

 

 

Realm connection 을 context에 담아 사용해보자. 

MyconText.Provider로 감싼 하위 컴포넌트들은 모두 realm connection에 접근하여 사용할 수 있게된다.

 

App.js

export const DBContext = React.createContext();

export default function App() {  
const [realm , setRealm] = useState(null);

useEffect( ()=>{
		// realm을 open 해서 가져온 connetcion 을 realm state에 저장한다.
      const dbConnection = await Realm.open({
        path: "shuDiaryDB",
        schema: [FeelingSchema],
      });
      
      //realm state에 저장한다.
      setRealm(dbConnection);
}
,[])

return (
// state에 있는 realm을 MyContext.Provider 에 넣어준다.
    <MyContext.Provider value={realm}>
        <NavigationContainer>
        </NavigationContainer>
    </MyContext>
)}

 

context.js

import React, { useContext } from "react";

export const DBContext = React.createContext();

export const useDB = () => {
  return useContext(DBContext);
};

Require cicle warning 을 피하기 위해 별도의 file에 작성해야 한다. 

 

Write.js

import { useDB } from "../context";

const Write = () => {
	// useDB()함수만 있다면 context에 담아둔 realm connection 객체를 사용할 수 있다.
  const realm = useDB();
  useEffect(() => {
    console.log("realm ", realm);
  }, []);
  
  
  ...
  return ( ... 
)}

 

realm.write() 를 이용해서 Feelings 와 Emotion을 저장해보자. 

write.js

 const onSubmit = () => {
    if (feelings === "" || selectedEmotion == null) {
      return Alert.alert("Please complete form.");
    }
    realm.write(() => {
      const felling = realm.create("Feeling", {
        _id: Date.now(),
        emotion: selectedEmotion,
        message: feelings,
      });
      console.log(felling);
    });
  };
  
   // LOG  {"_id": 1676609542333, "emotion": "🤗", "message": "Asssa!"}

 

save버튼 누르면 창 닫기

navigator 가 전해주는 navigation props 중에 goBack()  을 받아서 호출해주면 된다. 

const Write = ({navigation:{goBack})=>{
	...
    
	const onSubmit = ()=>{
    
    	...
    	goBack();
    }
    ...
}

write.js 화면에서 done 키 혹은 save 버튼을 누르면 dissmiss 된다.

다음글 

 다이어리 앱을 만들면서 연습해보자.- [R] Realm.filtered() 로 조회하고 Home.js 화면 그리기 / write.js에서 저장된 데이터를 Listenning해서 반영하기