useEffect 질문드립니다.

안녕하세요.

그리드에서 행을 선택하면 선택한 행의 데이터를 화면에 보여주려고 합니다.

그래서 다음과 같이 했습니다.

1. 그리드에서 행 선택
2. 이벤트 핸들러에서 setSelectedRow(data); 처리

3. setSelect.... 해줬기 때문에 useEffect 에서 랜더링 기대 (데이터가 바꼈기 때문에)

4. useEffect 는 랜더링 후에 동작하므로 좌절..

이렇게 했는데, 문제는 화면에 표시가 안됩니다.

랜더링 이후에 useEffect 가 수행되어서 그런거 같습니다.

어떻게 해결 할 수 있을까요?

그리드에서 항목을 선택하면 화면에 표시하고 싶습니다.

대략적인 소스는 아래와 같습니다.

import { ReactElement, useEffect, useState } from "react";
import Header from 'components/Header';
import Title from 'components/Title';
import styles from './User.module.css';
import Menu from './User.Menu';
import List from './User.List';
import Inspector from './User.Inspector';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import {
    MENU_SYSTEM_USER
} from 'config/config';

const User = (): ReactElement => {
    const [action, setAction] = useState('LST');
    const [visible, setVisible] = useState(false);
    const [selectedRow, setSelectedRow] = useState();

    const addButton = (event: any): void => {
        event.preventDefault(); 
        setAction('ADD');
        setVisible(!visible);
    };
    
    const edtButton = (event: any): void => {
        event.preventDefault(); 
        setAction('EDT');
        setVisible(!visible);
    };
    
    const delButton = (event: any): void => {
        event.preventDefault(); 
        setAction('DEL');
        setVisible(false);
    };

    const rowSelected = (data: any): void => {
        // console.log(data); 제대로 나옴
        setSelectedRow(data); // 데이터가 바꼈으므로 화면에 나올거라 기대
    };
    
    useEffect(() => {
        console.log(selectedRow); // 데이터 제대로 표시됨
        // 혹시 여기에다가 setSelectedRow 해줘야 하나요???
    }, [selectedRow]);

    return (
        <div>
            <Header />
            <Title title={ MENU_SYSTEM_USER } />
            <div className={ styles.workArea }>
                <Menu
                    addButton={ addButton }
                    edtButton={ edtButton }
                    delButton={ delButton }                    
                />
                {
                    visible === true ? <List visible={ true } rowSelected = { rowSelected }/> : <List visible={ true } rowSelected = { rowSelected }/>
                }
                {
                    visible === true ? <Inspector selectedRow = { selectedRow } /> : <Inspector />
                    // 여기에 데이터가 전달이 안되고 있음.
                }
            </div>
        </div>
    );
}

export default User;