레이아웃 레이아웃(ft. React TypeScript)

GUI의 구성 요소 중 하나는 레이아웃입니다. 단일 레이아웃, 이중 레이아웃 또는 다중 레이아웃일 수도 있습니다. 솔루션을 만드는 방법을 찾기 위해 그물을 샅샅이 뒤지는 동안 레이아웃을 빌드하는 데 반응형 스크립트 접근 방식을 찾는 것이 다소 어렵다는 것을 알았습니다. 따라서 재사용 가능한 적절한 솔루션을 컴파일했다고 느꼈을 때 공유할 수 있다고 생각했습니다. 이 기사에서는 이전에 서핑한 모든 마루와 골과 함께 레이아웃 개발 프로세스를 안내합니다.

**이 기사는 레이아웃 구축을 강조하므로 최소한 React-Typescript에 대한 초급 수준의 이해를 전제로 합니다.**

요점에 도달하기 전에 파일 구조에 대해 이야기합시다.
일반적으로 아래에 나열된 세 가지 유형의 CSS가 있습니다.
- 인라인 CSS
- 내부 또는 포함된 CSS
- 외부 CSS
이 프로젝트 전체에서 저는 외부 CSS를 사용하기로 선택했습니다. 파일 구분이 용이하기 때문입니다. 외부 CSS에는 태그 속성의 도움으로 스타일 속성만 포함됩니다. 간결함을 위해 다음을 사용합니다.
1. 디스플레이 콘텐츠를 스타일과 함께 단일 레이아웃으로 래핑하기 위해 one-column.tsx 를 사용 합니다.
2. CSS(및 sass)를 위한 one-column.styles.ts
두 개 이상의 패널 화면에 대해 유사한 패턴이 설정됩니다.
모든 화면 정보는 각각의 폴더에 코딩되어 screens.

...
layouts/
  nav-panel.styles.ts
  nav-panel.tsx
  one-column.styles.ts
  one-column.tsx  
  two-columns.styles.ts
  two-columns.tsx
  ...
routes/
  index.tsx
screens/
  screen-two/
    content-panel/
      index.tsx
    layout.tsx
...

import React from ‘react’;
import { ThemeProvider } from ‘react-jss’;
import theme from ‘../app-theme’;
import useStyles from ‘./one-column.style’;
export interface Props {
    contentPanel: React.ReactElement;
}
const OneColLayoutThemeWrapper: React.FC<Props> = (props) => (<ThemeProvider theme={theme}>
    <OneColLayout {…props} />
</ThemeProvider>);
const OneColLayout: React.FC<Props> = (props) => {
const styles = useStyles();
return <div className={styles.mainLayout}>
    {props.contentPanel}
</div>;
};
export default OneColLayoutThemeWrapper;

포함된 CSS 속성( one-column.styles.ts)은 다음과 같습니다.

import { ITheme } from “../app-theme”;
const { createUseStyles } = require(“react-jss”);
export default createUseStyles((theme: ITheme) => ({
    mainLayout: {
        minWidth:"1920px",
        minHeight: "1080px",
        fontSize: "25pt",
        backgroundColor: theme.palette.shade1,
    }
 }))

이 화면의 목적은 데모용으로 한 줄을 표시하는 것이므로 content-panel/index.tsx

export interface Props {}
const ContentPanel: React.FC<Props> = (props) => {
    return <div>Wubba Lubba Dub Dub</div>;
};
export default ContentPanel;

export interface Props {}
const ScreenOneLayout: React.FC<Props> = (props) => {
  return <OneColLayoutThemeWrapper 
   contentPanel={<ContentPanel />}
  />
};
export default ScreenOneLayout;

여기서 첫 번째 열은 탐색 패널에 해당하고 두 번째 열은 콘텐츠 패널에 해당합니다. 우리의 two-columns.tsx 는 두 개의 열을 포함하도록 성형될 것이므로:

export interface Props {
  columnOne: React.ReactElement;
  columnTwo: React.ReactElement;
}
const TwoColsLayoutThemeWrapper: React.FC<Props> = (props) => 
(<ThemeProvider theme={theme}>
  <TwoColsLayout {...props} />
 </ThemeProvider>
);
const TwoColsLayout: React.FC<Props> = (props) => { 
  const styles = useStyles();
  return (
    <div className={styles.twoColumns}>
      <div className={styles.firstColumn}>{props.columnOne} </div>.   
      <div className={styles.secondColumn}>{props.columnTwo}</div>
    </div>
  );
};
export default TwoColsLayoutThemeWrapper;

twoColumns: {
  display: "flex",
  flexDirection: "row",
  width: "100%",
  minHeight: "100vh"
},
firstColumn: {
  minWidth:"300px",
  minHeight: "1080px",
  backgroundColor: theme.palette.shade4,
  display: "inline-block",
  color: theme.white.accent1
},
secondColumn: {
  width:"1620px",
  color: theme.palette.shade4,
  backgroundColor: theme.white.accent1,
  padding:"25px 45px 25px 45px",
}

const ScreenTwoLayout: React.FC<Props> = (props) => {
return (
  <TwoColsLayoutThemeWrapper
    columnOne={<NavPanel />}
    columnTwo={<ContentPanel />}
  />
)};

여기까지 읽어주셔서 감사합니다!