함수 선언에 방식에 따라서 실행순서 혹은 문제가 있나요?

함수 선언에 방식에 따라서 실행순서 혹은 문제가 있나요? 함수 선언 방식에 대한 좋은 의견을 주셨으면 합니다!

  1. hello = () => {}
  2. const hello = () => {}

useEffect( () => {
hello();
}
1번 방법 실행 잘됨 (실행가능하고 기능도 잘 작동하지만 webstorm IDE에서 Unresolved variable or type 라는 에러를 띄움)
2번 방법 에러로그 뜨지않지만 실행자체가 안됨물론 위의 코드 실행 사이에 많은 작업들이 중간에 있음, 생략했습니다.

문제의 캡쳐화면입니다. (이대로 react-native run-ios 실행 됩니다)

2번으로 하셔야 됩니다. 2번에 해당하는 코드를 자세히 보여 주시겠어요?

1 Like
import React, { useState, useEffect } from 'react';
import {
    View,
    Alert,
} from 'react-native';
import { Functions, Dimensions } from 'Util';
import moment from 'moment';
import AsyncStorage from '@react-native-community/async-storage';
import * as HttpApi from 'Api/index';
import { default as TodayCard } from './TodayCard';
import { useSelector } from 'react-redux';
import Carousel from 'react-native-snap-carousel';
import {Button, Text} from 'react-native-elements';
import {NavigationEvents} from "react-navigation";

const Main = (props) => {
    const [ targetMoment, setTargetMoment ] = useState("20200420");
    const [ wcond, setWcond ] = useState({});
    const [ cards, setCards ] = useState([
        {
            cardType: "HI",
        },
        {
            cardType:"Hello",
        },
    ]);

    useEffect(() => {
        fetchTodayData(20, "202004", "20");
    }, [targetMoment]);

    // API 호출 함수
    const fetchTodayData = async (cont_id, target_ym, target_date) => {
        try {
            const requestInfo = {
                cont_id: cont_id,
                target_ym: target_ym,
                target_date: target_date,
            };
            await HttpApi.post('A_WORKCONDITION', requestInfo).then(async (result) => {
                if (result.status === 201) { // success
                    setWcond(result.data);
                }
                else { // 기타 에러
                    setWcond({});
                }
            });
            //
            //
            //  더 많은 API 가 있지만 생략 ...
            //  가져온 데이터들은 위의 setWcond(result.data) 와 같이 각각의 useState 에 저장
            //
            //
            await arrangeFields();
        } catch (error) {
            // console.log(error);
        } finally {
            // setLoading(false);
        }
    };

    const arrangeFields = () => {
        //
        //
        //  생략 ...
        //
        //
        cardPush(createWelcomeCardData());
    };

    const createWelcomeCardData = () => {
        return {
            cardType: 'Welcome',
        };
    };

    const cardPush = (data) => {
        let newCards = [...cards];
        newCards.push(data);
        setCards(newCards);
    };

    return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
        <Carousel
            data={cards}
            renderItem={TodayCard}
            itemWidth={310}
            enableSnap={false}
        />
        </View>
    );
};
export default Main;

2번에 해당하는 코드입니다. 실제 코드에서 많이 생략했습니다.
이 방식으로 하게되면 Carousel의 TodayCard 랜더링이 안되고
1번 방식 (함수를 const 없이 선언 ex-> cardPush = (data) => {} ) 으로 하면 정상적으로 랜더링 됩니다.
그리고 TodayCard는 별거 없고 cards 데이터 받아서 표시하는게 끝입니다.

cardPush 값을 정의하기 전에 사용하신 부분이 문제같네요.
사용하기 전에 선언해주셔야 합니다.
const 를 사용하지 않았을 때 되는 이유는 상위 스코프(글로벌?)의 cardPush 값에 assign 하게 돼서 그럴거예요.

1 Like

const를 사용한 내부 스코프의 화살표 함수는 호이스팅? 적용이 안되는거 였습니다. 그래서 순서를 변경했더니 정상 작동 하네요. 덕분에 해결했습니다. 감사합니다. :grin: :grin: