DEVOCEAN

안녕하세요 Teus입니다.

올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!

제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!

이번주는 11주차에 진행한 스터디 내용을 다루는 포스팅 입니다!

0. 스터디 운영

점점 브레이킹할 아이스 없지만, 계속해서 브레이킹중인 아이스브레이킹 시간 입니다.

이번주는 자신의 키워드를 모르고, 다른사람의 키워드만 아는 상태로 내 키워드를 맞추는 '양세찬게임'입니다!

이번주는 KJH님께서 준비해주셨습니다 :)

(첫판에 서로 연예인 맞추기 한판)

(두번째 판에 감 잡고 위인 맞추기 한판더!)

생각보다 알듯 말듯 모를듯 맞추는 재미가 있었네요 :)

아이스브레이킹은 여기까지!

이번주는 React이외에 라이브러리를 사용해서 React Native App을 보다 효율적으로 활용하는 방법에 대해서 다룹니다.

이때 App의 상태관리를 할 수 있는 Redux에 대해서 알아보도록 하겠습니다

1. Redux

Redux는 JavaScript의 상태관리 라이브러리 입니다.

현재의 React ContextAPI가 성숙해 지기 전에 자주 사용하던 라이브러리로, React Native뿐만 아니라 기존 React에서도 종종 사용됩니다.

Redux는 store에 상태를 관리할 변수들을 모아놓고, 이 상태를 변경할 때는 dispatch와 action을 통해서만 변경할 수 있게 통제합니다.

//액션의 타입
const INCREASE = "increase";
const DECREASE = "decrease";

//액션 생성 함수
const increase = () => ({type : INCREASE})
const decrease = () => ({type : DECREASE})

//초기상태
const initialState = {value : 1};

//리듀서 함수
const counter = (state = initialState, action) => {
    switch (action.type){
        case INCREASE:
            return {value : state.value + 1};
        case DECREASE:
            return {value : state.value - 1};
    }
}

위에서 정의된 액션 생성 함수는 외부에서 state를 변경하기 위해서 사용되며, react의 useState의 set함수와 유사하게 사용된다고 볼 수 있습니다.

위와같은 상태관리 변수는 하나가 아니겠죠?

그래서 여러개의 Redux 상태관리를 위해서 combinReducers를 사용해서 관리합니다.

import {conbineReducers} from 'reduc';

const rootReducer = conbineReducers({
    counter,
    todos,
    settings
})

2. Redux Store

위에서 말했듯, Redux는 모든 상태변수를 Redux Store에 저장하고, 이 변화에 따라 App의 상태를 관리합니다.

rootReducer로 합친 다양한 모듈을 하나의 store로 만들며, 이때 createStore함수를 이용합니다.

그리고 store를 react프로젝트에 적용하게 됩니다.

import {createStore} from 'redux';
import rootReducer from './modules';
import {Provider} from 'react-redux';

const store = createStore(rootReducer);

const App = () => {
    return (
        <Provider store = {store}>
            ...
        </Provider>
    )
}

이제 Component 내에서 이 값을 사용해야겠죠?

이때 useSelector와 useDispatch hook을 사용하게 됩니다

import {useSelector, useDispatch} from 'react-redux';
import {increase, decrease} from './modules/counter';
const Counter = () => {
    const value = useSelector((state) => (state.counter.value));
    const dispatch = useDispatch();
    const onPressIncrease = () => {dispatch(increase())}
    const onPressDecrease = () => {dispatch(decrease())}  
}

Component내에서 dispatch를 통해서 state가 변경될 경우 해당 Component가 refresh되게 되면서 App의 전역 state관리가 가능해집니다.

3. Redux Toolkit 사용하기

위 내용을 통해서 어떻게 Redux를 사용하는지는 알았습니다. 하지만 State관리를 위해서 준비해야할게 너무 많습니다.

이때 Redux Toolkit을 사용하면 하나의 .js파일을 통해서 위 작업들을 통일할 수 있습니다.

아래 Redux Toolkit을 사용한 예제코드를 보시겠습니다.

import {createSlice} from '@reduxjs/toolkit'

const initialState = {value : 1};

const counterSlice = createSlice({
    name : 'counter',
    initialState,
    reducers : {
        increase(state, action) {
            state.value += 1;
        },
        decrease(state, action) {
            state.value -= 1;
        }
    }    
})

여기서 흥미로운점은 불변성을 위해서 state값을 덮어쓰지 않고 일반 수정연산을 하게됩니다

이처럼 redux toolkit을 사용하면 불변성 관리를 해당 라이브러리가 해주기 때문에 보다 편리하게 사용이 가능합니다.

이런 전역 State의 경우 App의 로그인 관리등에서 사용됩니다.

하지만, ContextAPI가 충분히 편리해진 요즘에는 많이 사용되지는 않고, Legacy Code에서 주로 볼 수가 있습니다.

(RN같은 경우 async storage를 사용해도 충분히 비슷한 효과를 가져갈 수도 있습니다)

3. 조별토의

이번주는 다음주 최종 발표를 위해서 각 조별로 마지막 토의시간을 진행 했습니다.

1. 1조는 역시 싱그럼이란 주제를 가지고 식물을 거래&관리할 수 있는 어플리캐이션을 개발 중 입니니다. 이때 공공데이터를 사용해서 데이터를 가지고 오는 어플리캐이션을 구축하고 있네요!

2. 2조는 운동 어플리캐이션에서 운동/식단/헬스장 3가지를 관리, 탐색할 수 있는 어플리캐이션을 완성하고 있으나, 현재 Nested Navigation 구조로 정상적인 Parameter 이동을 못해서 난국에 봉착해있습니다 :(

3. 3조는 이제 준비된 중고거래 플랫폼에 API를 연결하는 작업 중 입니다. 이 작업이 완료되면 실제로 게시글을 올리고, 저장하는 결과를 볼 수 있을거 같은데요!(계속 할지는 잘....)

다음주는 이제 DEVOCEAN스쿨 RN스터디 마지막 시간 입니다!

마지막시간에는 최종발표와, Redux와 유사하게 상태관리를 할 수 있는 리코일 라이브러리, DR관점에서 스터디의 의미에 대해서 다루고 RN스터디는 마무리 하려 합니다!

감사합니다! 다들 즐거운 하루 되시길 바래요!