[TIL-163] React Native

 

Redux

dispatch 에러

Possible Unhandled Promise Rejection (id: 0):
ReferenceError: setToken is not defined

import React, {useState, useRef, useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';

const PwVerify = ({navigation}) => {
  const token = useSelector(store => store.token);
  const dispatch = useDispatch();

...
// fetch하여 result에 담긴 token 받아옴
  dispatch(setToken(result.access));
}

암만 봐도 dispatch안에 액션 이름을 맞게 썼는데 정의되지 않았다는 에러가 떠서 30분을 헤맸다. 다른 액션을 써봐도 마찬가지였다.

 

import React, {useState, useRef, useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {setToken, removeToken} from '../redux/token';
import API from '../../config';

const PwVerify = ({navigation}) => {
  const token = useSelector(store => store.token);
  const dispatch = useDispatch();
  
  const loginFetch = password => {
    fetch(API.signin, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        identification: idText,
        password: password,
      }),
    })
      .then(res => res.json())
      .then(result => {
        if (result.access) {
          dispatch(setToken(result.access));
          navigation.navigate('Home');
        }
        
        
  ...

알고보니 허무하게도, 해당 액션을 import(셋째줄) 해주지 않은 탓이었다. 어째 setToken이 뭔지 어떻게 알고 dispatch가 처리하나 했다. 이전에 작동할 때와 바뀐 게 없다고 생각했는데 액션 이름을 바꾸면서 그전에 있던 import 부분을 지워버렸던 것 같다. 아직 리덕스의 흐름을 잘 이해하지 못해서 생긴 문제였다.

https://forums.meteor.com/t/solved-uncaught-referenceerror-dispatch-is-not-defined/27289/2 서치하다 해당 글에 나온 코드에서 action 함수를 import해주는 부분을 보고 깨달았다.

 

point.js

// Action Creator & Action
export const setPoint = newPoint => ({type: SET_POINT, point: newPoint});
export const removePoint = () => ({type: REMOVE_POINT});

액션을 만드는 파일에서 각 액션에 export해둔 것도 이유가 있었다. 어디서 쓰이길래 export를 하나 했는데, 내가 액션을 실행할 곳에서 import해야 하기 때문이었던 거다.

 

 

숫자 한글로 변환하기

Math.pow(base,  exponent)

base에 exponent만큼 제곱한 값을 반환함.

 

Array.reduce( )

배열의 각 요소에 리듀서 함수 실행 후, 하나의 결과값 반환.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

직접 코딩... 포기

  const koreanAmount = num => {
    // num=12,345,678
    const tenThousandUnit = ['', '만', '억'];
    const tenUnit = ['', '십', '백', '천'];
    let answer = '';
    let unit = 10000;
    // let division = Math.pow(unit, index);

    for (let i = 0; Math.floor(num / Math.pow(unit, i)) > 0; i++) {
      let division = Math.pow(unit, i); // division=[1, 10000, 100000000]
      const mod = Math.floor((num % (division * unit)) / division); // 1234.5678 => 1234
      if (mod) {
        // mod가 0보다 크면
        const modToArray = mod.toString().split(''); // [1, 2, 3, 4]
        const modLength = modToArray.length - 1; // 3 => 배열에서 인덱스값으로 이용?
        const toKorean = modToArray.reduce(
        ...
        
      }
    }
  };

 

[javascript] 아라비안 숫자를 한글식으로 변환하기 https://jjnooys.medium.com/javascript-%EC%95%84%EB%9D%BC%EB%B9%84%EC%95%88-%EC%88%AB%EC%9E%90%EB%A5%BC-%ED%95%9C%EA%B8%80%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0-a45989559704   

위 링크 보고 따라 쳐보려고 했는데 도저히 이해가 안 돼서 포기.

 

함수 모듈 : NumToKorean

https://github.com/huskyhoochu/num-to-korean