상태 관리 라이브러리, Recoil을 사용해보자!

Recoil?

페이스북에서 만든, React를 위한 상태 관리 라이브러리이다. Redux는 아직 사용해보지 않아서 둘의 명확한 차이는 잘 모르지만, Recoil을 한 번 사용해 보았을 때 React 내장 Hooks와 사용하는 방식이 비슷해 크게 어렵지 않았다. 그저 useState를 useRecoilState로 작성하기만 하면 된다.

Recoil 공식 문서에서는 "Recoil을 사용하면 atoms에서 selectors를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다." 라고 소개한다.

Atoms

Atoms는 상태의 단위이다. 업데이트와 구독이 가능하며, atom이 업데이트 되면 새로운 값을 반영해 리렌더링 된다. 동일한 atom이 여러 컴포넌트에서 사용된다면 모두 한 상태를 공유하게 된다.

Selectors

atoms의 상태값을 동기 또는 비동기 방식을 통해 변환하는 순수 함수이다. 상위 atoms나 selecotrs가 업데이트 되면 하위의 selector 함수도 다시 실행되며, atoms 처럼 구독이 가능하고 변경되면 컴포넌트들도 리렌더링 된다.

Recoil 시작하기

🔧 설치

yarn add recoil

RecoilRoot

루트 컴포넌트 (Ex_App.tsx)에 RecoilRoot로 전체를 감싸주어야 한다.

App.tsx

...
import { RecoilRoot } from "recoil";

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <RecoilRoot>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="Home">
                    <Stack.Screen
                        name="Home"
                        component={Home}
                        options={{ title: "Home" }}
                    />
                    <Stack.Screen
                        name="Login"
                        component={Login}
                        initialParams={{ name: "Login", userId: "User" }}
                        options={{ title: "로그인" }}
                    />
                </Stack.Navigator>
                <StatusBar style="auto" />
            </NavigationContainer>
        </RecoilRoot>
    );
}

authState

auth에 대한 정보 저장할 거라서, 아래처럼 authState 작성했다. email과 password를 저장하기 위해 interface도 정의했다.

recoil/auth.tsx

import { atom } from "recoil";

export interface IAuthTypes {
    email: string;
    password: string;
}

const authState = atom({
    key: "authState",
    default: null,
});

export default authState;

auth, setAuth

이제 authState를 사용해서 저장해보장!

Login/index.tsx 일부

import authState, { IAuthTypes } from "../../recoil/auth";
import { useRecoilState } from "recoil";
...

const Login = ({ navigation }: Props) => {
    const [auth, setAuth] = useRecoilState<IAuthTypes[]>(authState);
    ...
    return (
        <Container>
            ...
            <Button
                style={{ marginBottom: 24 }}
                label="Login"
                onPress={() => {
                    setAuth([{ email: username, password: password }]);
                }
            />
            <Button
                style={{ marginBottom: 24 }}
                label="Confirm"
                onPress={() => {
                    console.log(auth);
                }
            />
            ...
        </Container>
    );
};

export default Login;

어디서든 useRecoilState<>(authState)만 사용하면, 또는 useRecoilValue만 사용하면 저장해둔 값을 사용할 수 있다.

Cookie, Session, Token에 대해 알아보자!

쿠키, 세션, 토큰. 모두 들어본 적이 있는 친숙한 단어들이다. 그런데 이 세가지가 무엇을 하는지, 왜 필요한지에 대해서 알아야 쿠키값이든 토큰이든 뭐든 받아서 어떻게 처리해야 하는지 알 수 있을 것 같아 공부한 내용을 정리하려 한다.

Cookie?🍪

쿠키는 브라우저에서 사용한다. 우리는 쿠키를 이용해서 서버가 브라우저에 데이터를 넣도록 할 수 있다. 브라우저를 방문할 때마다 쿠키를 요청과 함께 보내게 된다. 인증 뿐만아니라 여러 정보도 저장이 가능하다.

우리가 A라는 영어로 된 브라우저에 방문해서 쿠키를 허용하고 그 웹 브라우저에서 영어가 아닌 한국어로 보겠다고 저장해두면, 다음에 또 다시 이 A라는 브라우저에 방문했을 때 그 쿠키값을 가져와 다시 한국어로 설정할 필요 없이 바로 영어로 우리에게 보여주게 되는 것이다.

Session?

웹 브라우저에 로그인을 하면, 비밀번호 일치에 대한 확인 과정이 있을 것이다. 이 때 비밀번호가 일치하면 세션DB에 나의 아이디와 비밀번호 등으로 구성된 USER가 생성된다.

현재 이 웹 브라우저에 로그인하고 있는 모든 USER들의 정보들이 세션 DB에 저장되어 있게 된다.

이 때문에 웹 브라우저를 사용하는 유저들이 많을수록 많은 DB가 필요하기도 하다. 하지만 토큰으로는 할 수 없는 USER 제거가 가능하다. 현재 로그인하고 있는 유저들이 DB에 저장되어있기 때문에 그 DB에서 유저를 찾아 없애기만 하면 되는 것이다.

세션DB에서 서버로 ID값을 보내면 서버에서는 이 ID 값을 담은 '쿠키'를 브라우저로 전달하게 된다. A라는 웹 브라우저 내의 한 페이지에서 다른 페이지로 가면 세션ID가 쿠키를 넘기고, 또 넘기는 방식으로 쿠키값을 전달해 우리가 해당 웹 브라우저를 계속 사용할 수 있게 되는 것이다.

Token?

세션 DB가 필요 없다. 정보를 하나하나 찾을 필요가 없다는 뜻이다. 토큰은 아주 긴 텍스트로 구성되어 있는데, 우리는 세션DB에서 처럼 USER를 찾는게 아니라, 이 토큰이 '유효한가'에 대해서만 확인하면 된다.

Access Token

유효기간을 가진, 서버가 기억하는 토큰이다. 유효기간은 비교적 짧다.

Refresh Token

위의 Access Token의 짧은 수명을 보완해주는 친구다. Access Token의 유효기간이 다 되면 Access Token을 다시 발급해줄 Token이다.

로그인 -> 토큰 발급 -> 토큰 만료 -> 로그아웃 -> 로그인 -> Access Token 유효X -> Refresh Token으로 다시 Access Token 발급 ...

내가 이해한 바로는 이러한데.. 자신이 없다 😓

Nicolas 강의를 참고했는데, 아직 부족한 부분이 많다. 조금 더 공부할 필요가 있는 부분인 것 같다.

AsyncStorage를 사용하기 전에, 기초를 조금 닦아보자!

React로 웹 프로젝트를 했을 때는 세션으로 로그인을 구현했어서, token에 대한 공부를 따로 할 필요가 없었다. 이번에 React-Native를 사용하면서 JWT 토큰 보관을 해야해서AsyncStorage를 공부하게 됐다.

Recoil을 사용해 비동기적으로 불러온 데이터를 저장하긴 하지만, 앱을 닫았을 때 이 데이터들을 저장하기 위해 사용한다.

처음부터 차근차근 해보자!

Promise?

비동기적 작업을 편하게 관리하도록 도와주는 객체 Promise를 사용하면 콜백 함수로 비동기 작업을 관리하다 발생할 수 있는 일을 방지할 수 있다.

동기적 작업 특정 작업이 끝날때까지 다음 작업을 시작하지 않고 대기하다가 기존 작업이 끝나면 다음 작업을 시작 (block 상태)

비동기적 작업 특정 작업이 끝나지 않아도 다음 작업을 수행

만드는 방법

const promise = new Promise((resolve, reject) => {
    // ...
})

resolve : 작업이 성공했을 때 호출되는 함수 reject : 작업이 실패했을 때 호출되는 함수

then 메서드 Promise 객체에서 resolve된 결과를 then 메서드를 통해 사용할 수 있다.

async? await?

Promise를 더 쉽게 사용할 수 있도록 해주는 키워드!

사용 방법 함수 선언할 때 앞에 async 붙이기

async function example(ex) {
    // ...
}

Promise 앞부분에 await 붙이기

async function res() {
    let result = 1;
    result = await example(result);
}

res.then(
    result => {
        console.log(result);
    }
)

Promise, async, await는 AsyncStorage만이 아니라 비동기 작업을 처리할 때 사용되기 때문에 잘 알아두면 좋을 것 같아 다시 한 번 짚어보았다.

이제 진짜 AsyncStorage 시작 !!

AsyncStorage

설치하기

yarn add @react-native-async-storage/async-storage

setItem

특정 값을 저장할 때 사용하는 메서드

const save = async() => {
    try{
        await AsyncStorage.setItem('key', 'value');
    } catch (e) {
        //오류 예외 처리
       }
}

값은 문자열 타입이어야 하고, 객체 또는 배열 타입을 저장하려면 JSON.stringify 함수를 사용한다.

await AsyncStorage.setItem('key', JSON.stringify(obj));

getItem

특정 값을 불러올 때 사용하는 메서드

const load = async() => {
    try{
        const value = await AsyncStorage.getItem('key');
        ...
    } catch (e) => {
        //오류 예외 처리
    }
}

이 또한 값은 문자열 타입이며 객체 또는 배열을 불러오려면 JSON.parse 함수를 사용한다.

const obj = JSON.parse(value);

이 외에도 여러 API가 존재한다. 그건 요기 참고 -> https://reactnative.dev/docs/asyncstorage

일단 내가 사용할 것은 setItem으로, 로그인을 했을 때 토큰 저장을 하는 것이고 다음에 SplashScreen에서 getItem으로 다시 값을 가져와 로그인 여부를 확인하려한다.

일단 로그인은 구현이 되어있는데 AsyncStorage에 토큰 값을 저장해보자!

AsyncStorage에 값을 저장해보자!

Login/index.tsx 일부

<Button
    style={{ marginBottom: 24 }}
    label="Login"
    onPress={() => {
        login(password, username).then((v: any) => {
            if (v.status == 200) {
                AsyncStorage.setItem("AccessToken", v.data.token); // 토큰 저장
                navigation.navigate("Home");
            }
        });
    }}
/>;

AccessToken이라는 Key값과 토큰을 저장했다. 로그도 찍어봤는데 잘 넘어가고, 잘 담겨있는 것을 확인할 수 있었다. 마지막에 navigation까지 Home으로 넘겨주면 끝!

getItem은 SplashScreen 만드는 부분에서 사용해 볼 예정이다.

https://0biglife.tistory.com/entry/%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-token-%EC%A0%80%EC%9E%A51

"리액트 네이티브를 다루는 기술"을 참고하여 작성하였습니다.

React-Native _ Recoil 에러

내가 하고자 했던 것은 Recoil 사용해서 auth를 저장하는 것 .. 일단 이렇게 에러가 뜨면 어디서 에러가 났는지 알 수 가 없어서 웹 에러보다 더 어렵다 ㅠㅠ

하지만.. 로그를 읽으면 답이 나오겠지 라는 마인드로 하나하나 차근차근 해봅시다.

Invalid hook call. hook을 잘못썼단다. 나 아직 hook 쓴거 없는뎀 Hooks can only be called inside of the body of a function component. 훅은 함수형 컴포넌트 내에서만 사용되어야 한다..?

전 Login/index.tsx

const [auth, setAuth] = useRecoilState<IAuthTypes[]>(authState);

const Login = () => {
    ...
    }

바보였다..

후 Login/index.tsx

const Login = () => {
    const [auth, setAuth] = useRecoilState<IAuthTypes[]>(authState);
    ...
    }

로그를 더 읽어 볼 필요도 없었다. 말끔하게 해결되었기 때문..

누군가 에러로 고생하고 있는 나에게 '로그 읽으면 거의 대부분의 에러는 다 해결 가능하다'라고 해주셨다. 긴 에러만 보면 겁에 질리곤 하는데 이제 하나씩 읽어볼 용기가 생기는 느낌..!!!

어쨌든 쉽게 해결!😅

Navigation을 사용해보자!

React-Native에서는 화면 간 이동을 위해서 Navigation 라이브러리 설치가 필요하다.

Navigation 라이브러리 설치

yarn add @react-navigation/native

expo 사용

npx expo install react-native-screens react-native-safe-area-context

react-native-cli 사용

yarn add react-native-screens react-native-safe-area-context

내비게이션 종류는 Stack, Tab, Drawer 등 여러가지가 많다. 그 중에 Stack Navigation을 사용할거다.

Stack Navigation 설치

yarn add @react-navigation/native-stack

준비 끝!😊

이제 React에서 BrowserRouter로 감싸줬듯, NavigationContainer로 App.tsx 전체를 감싸줄거다.

Stack을 사용할 기본 틀으로 createNativeStackNavigator의 Navigator를 사용한다. 그 내부에 우리가 사용할 화면들을 Screen으로 띄우면 된다.

아래의 코드는 React-Native 공식 문서에 나와있는 코드를 참고한 것이다.

하나씩 차근차근 해보잣!

App.tsx

import { Text, View } from "react-native";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function HomeScreen() {
    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <Text>Home Screen</Text>
        </View>
    );
}

function DetailsScreen() {
    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <Text>Details Screen</Text>
        </View>
    );
}

const Stack = createNativeStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                    options={{ title: "Overview" }}
                />
                <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

어떻게 전환되는지 알겠다.

이제 진짜 내가 하고자 했던..! 화면 간 전환을 해 볼 차례다😊 Home <-> Login 전환을 해볼거다.

TypeScript를 사용하고 있기 때문에, Props 까지 만들어줘야하는게 힘들었다. 공식 문서를 하나씩 뜯어가면서 따라하는 겸 해서 참고를 많이 하고 있었는데, 문제는 공식 문서의 예시 코드는 죄다 js로 되어있다. ts의 type 지정은 구글링을 해야한다는 것!!

한참 구글링하다 결국 돌아온 곳은 공식 문서인데, 잘 뒤적뒤적 해보니

type 지정 공식 문서 : Type checking with TypeScript

세상에나 .. 공식 문서에 떡하니 나와있었다. 바로 고고싱😥

ParamList 만들기

RootStackParamList/index.tsx

export type RootStackParamList = {
    Home: undefined;
    Login: { name: string; userId: string };
};

이렇게 먼저 type을 지정해 둔다. (이게 다였슴)

App, Home, Login 수정하기

App.tsx

import { StatusBar } from "expo-status-bar";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Login from "./src/components/Login";
import Home from "./src/components/Home";
import { RootStackParamList } from "./src/components/types";

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen
                    name="Home"
                    component={Home}
                    options={{ title: "Home" }}
                />
                <Stack.Screen
                    name="Login"
                    component={Login}
                    initialParams={{ name: "Login", userId: "User" }}
                    options={{ title: "로그인" }}
                />
            </Stack.Navigator>
            <StatusBar style="auto" />
        </NavigationContainer>
    );
}

Home/index.tsx

import React from "react";
import { View, Text } from "react-native";
import Button from "../Button";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { RootStackParamList } from "../types";

type Props = NativeStackScreenProps<RootStackParamList, "Home">;

const Home = ({ navigation, route }: Props) => {
    return (
        <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <Text>Home Screen</Text>
            <Button
                label="Login"
                style={{ backgroundColor: "pink", width: "50%" }}
                onPress={() =>
                    navigation.navigate("Login", { name: route.name, userId: "User" })
                }
            ></Button>
        </View>
    );
};

export default Home;

Login/index.tsx

import React from "react";
import { View, Text } from "react-native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { RootStackParamList } from "../types";

type Props = NativeStackScreenProps<RootStackParamList, "Login">;

const Login = ({ route }: Props) => {
    const { name, userId } = route.params;
    return (
        <View>
            <Text>
                This is {userId} {"'"}s Login Screen! {name}
            </Text>
        </View>
    );
};

export default Login;

Login 에서 또 다른곳으로 넘어가고싶으면 navigation을 받아서 또 연결해주면 됨!

💙이제 나도 Login UI 넣을 수 있어요💙

eslint, prettier 설정하기

여기저기 다 뒤져봐도 잘 모르겠기도 하고, eslint랑 prettier 설정 하고 나면 자꾸 conflict가 발생해서 실행조차 못하기도 했다.

계속해서 구글링도 해보고 이것저것 시도도 해보던 와중에, https://velog.io/@dvisign/%EB%B8%94%EB%A1%9C%EA%B7%B8-%ED%98%95%EC%8B%9D-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EA%B0%9C%EB%B0%9C%EA%B8%B0-2-%EC%B4%88%EA%B8%B0-%EC%85%8B%ED%8C%852

react-native에서 설정하는건 아니지만 이대로 설정해서 실행 시키기 완료..!!

React-Native로 화면에 원하는 Text 입력해보기

일단 첫 시작으로 src 폴더 안에 New_App 파일을 생성해주고 뷰 안에 텍스트를 넣어 가운데에 원하는 문자를 출력해보려 한다.

기존에 있는 App.tsx 파일은 그대로 둬도 상관 없으니, 그냥 새로 만들면 된다.

안에 어떤 코드를 작성해도 기본 App.tsx가 실행되고 있으니 Emulator에는 아무것도 뜨지 않는 것이 맞다.

우선 빈 화면으로 보이게 하기 전에, New_App을 갖다 써야하니까 틀이라도 만들어보자.

이렇게 리액트에서와 동일하게 함수형으로 만들고, export까지 해주면 틀 완성!

그냥 안에 Hello, World! 와 같은.. 원하는 문자를 보여줄 것이기 때문에 이정도로 하고, 이 빈 화면을 우리 Emulator에 보여줄 것이다.

index.js파일로 이동해서 기존의 코드에 있는 App만 New_App으로 바꿔줄거다. 연결만 해주면 뿅..! 당연히 View로 감싸뒀으니 아무것도 안나오는 게 맞음!

이제 진짜 첫걸음.. Text로 정 가운데에 아무 문자열을 넣을거다. 이렇게 View 안에 Text로 'Hello, World!'라는 문자열을 출력해보려 한다. 매우 간단..!

Text 요소의 Props들 살펴보기

한동안 RN공부 그리고 지금 하고 있는 사이드 프로젝트를 진행하면서 Text 요소를 사용할 때 직접 사용해본 props들을 여기에 기록해볼 예정이다.

onPress

onClick이랑 똑같다고 보면 될 듯 하다. 간단하게 글자(Text)를 누르면 Text가 바뀌도록 작성해보았다. 글자부분을 누르면 저렇게 바뀐다..는 정도!

살펴보니 줄 수 제한도 할 수 있고, 여러가지 할 수 있는게 많은 것 같은데 그런 것들은 필요할 때 쓰고 기록을 남기려 한다..!!

https://itskeleton.tistory.com/entry/React-Native-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%ED%85%8D%EC%8A%A4%ED%8A%B8-Text-%EC%9A%94%EC%86%8C

React-Native 환경 설정하기

1. jdk 11버전 설치 및 환경설정
2. 안드로이드 스튜디오 설치 및 환경설정
3. Node.js 설치
4. Python 설치
5. 프로젝트 생성

1. jdk 11버전 설치 및 환경설정

오라클에 접속해서 로그인 후 11버전을 다운받으면 된다. https://www.oracle.com/kr/java/technologies/downloads/#java11-windows 그리고나서 환경 설정을 해주어야 하기 때문에 자바 경로로 이동해서 경로복사! 시스템 속성 > 환경 변수 > 새로 만들기 여기서 이제 아까 복사한 경로를 변수 값에 입력한다. 환경변수 > 시스템 변수 > Path > '%환경변수 명%bin' 입력 후 cmd 창에서 자바 jdk 설치를 확인해준다. 뭐 대충.. 이렇게 뜨면 됨. 근데 설치 했더니 .. 원래 16버전이 있었는데 다른 설치방법들 슥슥 찾아보니 아무버전이든 상관 없는 듯 ..? 아무튼 java -version 까지 확인해주면 된다.

2. 안드로이드 스튜디오 설치 및 환경설정

예전에 안드로이드 스튜디오도 설치 했다가 지웠기 때문에.. 다시 설치해줘야 한다.. https://developer.android.com/studio?hl=ko 들어가서 다운로드 하면 됨 그냥 설치하면 된다. 그냥 계속 Next 누르면 됨. 나는 예전에 썼어서 그런지.. 그 파일도 없는데 복구도 해준다.. Configure? 새로 다운 받은 사람들은 오른쪽 아래에서 찾을 수 있을 건데, 나는 눈씻고 찾아도 없어서 그냥 Tool에 있는 SDK Manager 바로 열어줬다. Show Package Details 하면 세부사항 볼 수 있으니까 필요한 것만 SDK Platforms와 SDK Tools에서 체크해주면 된다. 아까 jdk 설치할 때 했던 환경변수 설정 한 번 더 해줘야하니까 Location 복사해두기! 설치하는데 조금 오래 걸림...^^

위에서 했던 환경변수 설정 하는거 그대로 가서 넣어주고, 이번엔 Path에 platform-tools 경로 추가해야하기 때문에 다시 내PC로 가서 경로 따온다.. (이제 슬 지침)

3. Node.js 설치

이제 Node를 설치해줍시다. 안정화된 LTS를 설치해주는게 좋다네요.. 좋다면 좋은거 나도 LTS 다시 설치했음

요 사이에 갑자기 PowerShell 떠서 뭔가 샤샤샥 계속 글자가 내려가는데.. 뭔지 몰라서 그냥 한참 기다리다 껐음.. 설마 설마 여기서 무슨 문제가 생기는건 아니겠지 ㅠㅠ

4. Python 설치

https://www.python.org/downloads/ 난 설치되어 있으니 패스..! 저기 Download Python 3.xx 누르면 바로 설치 소소속 된다.

5. 프로젝트 생성

터미널 창에서 작업할 공간으로 이동한 후에, npx react-native init '프로젝트 이름' 입력하면 이런 슬데없이 큰 그림 이쁜 리액트 로고가 뜨면서 템플릿이 다운로드 된다.

6. 성공!!!!

처음 써보는 글인데.. 이렇게 힘든걸로 시작하다니ㅠㅠ React 환경 설정은 몇번이고 해도 오래걸일 일이 잘 없었는데 RN은 좀 다르다.. 구글 뒤져보면서 이것저것 참고해보고 했는데.. 아무튼 무사히 성공했다,,!

갑자기 앱 개발 제안이 나와서 급하게 환경 구축해봤는데 하나씩 글도 써보려구 한다..!

앞으로 잘 부탁해 나 자신.. ❤