인프런 커뮤니티 질문&답변

안녕하세요 양질의 수업을 무료로 오픈해주셔서 항상 공부 잘하고 있습니다. 이번에 클론 코딩 진행하면서 setState 부분이 조금 이상해서 질문 드려요

import React, { useEffect, useState } from 'react'
import Axios from 'axios';
import { Row, Col, List, Avatar } from 'antd'

function VideoDetailPage(props) {

    const videoId = props.match.params.videoId;
    const VideoVariable = { videoId: videoId };

    const [Video, setVideo] = useState([])

    useEffect(() => {
        Axios.post('/api/video/getVideo', VideoVariable)
            .then((res) => {
                if (res.data.success) {
                    setVideo(res.data.video);
                    console.log('state 업데이트 완료')
                } else {
                    alert('비디오 정보 로딩 실패');
                }
            })
    }, []);

    if (Video.writer) {
        return (
            <Row gutter={[16, 16]}>
                <Col lg={18} xs={24}>
                    <div style={{ width: '100%', padding: '3rem 4em' }}>
                        <video style={{ width: '100%' }} src={`http://localhost:5000/${Video.filePath}`} controls></video>
                        <List.Item
                        // actions={[<LikeDislikes video videoId={videoId} userId={localStorage.getItem('userId')}  />, <Subscriber userTo={Video.writer._id} userFrom={localStorage.getItem('userId')} />]}
                        >
                            <List.Item.Meta
                                avatar={<Avatar src={Video.writer && Video.writer.image} />}
                                title={<a href="https://ant.design">{Video.title}</a>}
                                description={Video.description}
                            />
                            <div></div>
                        </List.Item>

                        {/* <Comments CommentLists={CommentLists} postId={Video._id} refreshFunction={updateComment} /> */}

                    </div>
                </Col>
                <Col lg={6} xs={24}>
                    side video
                        {/* <SideVideo /> */}

                </Col>
            </Row>
        )
    } else {
        console.log(Video, '후후')
        return <div>
            Loading... ??
        </div>
    }
}

export default VideoDetailPage

이게 제 코드구요 실행하면 아래의 else 부분의 후후먼저 실행되고 위의 setVideo가 실행됩니다.

그래서 에러가 발생해 detail 페이지로 가지않고 다시 landing 페이지로 넘어옵니다

비동기 처리때문인가 싶어 setVideo를 콜백의 형태로 남겨서 동기처리 할수있다길래 해봐도 안되고, useEffect 아래 input 리스트에 Video를 넣어보기도 했는데 잘 안되네요 ㅠㅠ

https://github.com/dnfwlxo11/mini_youtube

이게 제 풀 코드입니다.

component 코드들이랑 index.js 코드랑 몇번이나 본지 모르겠어요 이유가 뭘까요?