[230616] 프리프로젝트 진행 - Route

import React from 'react';
import UserInfo from '../../components/userinfo/UserInfo';
import {UserTopNav} from '../../components/userinfo/UserNav';
import UserMain from '@/components/userinfo/UserMain';

interface Userpage {}

const UserPage = ({}:Userpage) => {
    return(
        <main className="max-w-screen-xl">
            <UserInfo/>
            <UserTopNav/>
            <UserMain/>
        </main>
    )
}

export default UserPage;

UserTopNav에 있는 버튼 클릭에 따라 Main에서 나타날 화면이 다르게 하고 싶었다. 

 

Main에는 또 두 가지 버전의 화면이 있다..

지금 아직 작성 중이라 SideNav 가 버전이 2개 Main이 버전이 2개 이다. 아마 

 

 <div>

{삼항 연산자 : 버전1의 Nav + Main : 버전2의 Nav + Main}

</div>

 

이렇게 만들 것 같긴 한데 잘하고 있는 건지 모르겠다. 

import React from 'react';
import {UserSettingNav, UserInfoNav} from '../../components/userinfo/UserNav';
import UserSetting from './UserSetting';

const UserMain = () => {
    return(
        <main className="ml-4 h-screen flex flex-row">
            <div className="basis-2/12">
                {/* <UserSettingNav/> */}
                <UserInfoNav/>
            </div>
            {/* 삼항 연산자 */}
            <div className="mr-4 pl-4 basis-10/12">
                <UserSetting/>
            </div>
        </main>
    )
};

export default UserMain;

 

 

리액트의 컴포넌트 쪼개기 라는 것은 정말 편하지만 너무 쪼개면 또 가독성이 떨어졌다. 코드를 어느 기능 단위까지 쪼개야 하는 가.. 

그것이 가장 큰 의문이었다.