#クリエイターセンター

作成が完了すると、「作成センターHeader/ASide/Footterレイアウト」フォームが発行されます.

#実装機能

styled-componentは知れば知るほど不思議に思う.

#usStateを使用してページをクリックして移動し、重複するボタンを再使用します。

[ Header.js ]

<button className="btn">나가기</button>

右上隅の終了ボタンをクリックすると、ポップアップ画面が下の画像のように表示され、ポップアップ画面内部の各ボタンをクリックして「終了」をクリックしてホームページに入り、「書き続ける」と「X」をクリックすると、UIユーザーはクリック前に見た画面を保持します.
クラスコンポーネントを使用すると、コードが不要に長くなるように感じるので、ページ移動が簡単な場合はコードは基本的に4-5行少なくなりますが、関数形式であれば、コードは短い2行の長さに十分に反映され、慣れていない初心者開発者の視線でも十分に理解できます.

[ Header.js ]

//클릭 모션 받아올 준비

const Header = ({ handleExit })={
  ...
<button onClick={handleExit} className="btn">나가기</button>
  ...
}

[ index.js ]

const Index = (props) => {
const [isExit, setIsExit] = useState(false);
  
  const history = useHistory();

  const handleExit = () => {
    setIsExit(prev => !prev);
  };

  const handleCurrentPage = page => {
    setCurrentPage(page);
  };

  const handleTogoMain = () => {
    history.push('/');
  };
  
  ...
  
   return (
   	<Header handleExit={handleExit} />
        {isExit && (
           <ExitBox>
             <PopupBox>
               <ExitClick>
                 <AiOutlineClose size={24} onClick={handleExit} />
               </ExitClick>
               <BoxTitile>
                 <p>{id}</p>님 <span>정말 나가실 거예요?</span>
               </BoxTitile>
               <BoxText>
                 오늘, 마음먹은 김에 바로 페이지 작성을 완료하고 {id}님을
                 기다리고 있는 수강생들을 만나세요! 조금만 더 힘내봐요 우리 🙆‍♀️
               </BoxText> 
               <Buttons>
                 <ExitButton onClick={handleTogoMain}>나갈래요</ExitButton>
                 <ExitButton on Click={handleExit} primary>
                   계속 작성할래요
                 </ExitButton>
               </Buttons>
             </PopupBox>
           </ExitBox>
         )}
	...
   );
}

上記の[index.js]のようなコードを使用すると、不要なclassNameを使用しなくなるという利点があります.
styled-componentを使用して可読性を向上させ、対応するスタイルを下部からconstを減算してスタイル要素を作成します.
useStateによって1行を非構造割り当てとして処理し、パラメータと変更値をそれぞれ使用したいSTAIL素子に割り当てて関数を宣言し、関数に簡単に内容を書き、効率的な結果を生成します.

#styled-connt活用！

styled-componentは脱ぐほど不思議な感じがします.
-使用したい方法:外部構成部品(Footer.js)の内部に天命構成部品(ボタン)のスタイルを作成し、作成中の構成部品(Index.js)にインポートし、天命構成部品を再使用し、スタイルの一部のみを変更します.
[ Footer.js ]

出口

外部で使用したい天命素子.

[ Index.js ]

import Footer, { Button } from './Components/Footer';
import styled, { css } from 'styled-components';

使用するエレメントの上部にimportをドラッグ&ドロップし、使用する部分にインポートされた天命の天命エレメントを包みます.
その後、ExitButton構成部品に変更または追加するスタイルを作成して終了します.2つの

ボタンに共通要素が宣言され、各ボタンに異なる部分が加わると以下に示す.

<ExitButton onClick={handleTogoMain}>나갈래요</ExitButton>
<ExitButton onClick={handleExit} primary>계속 작성할래요</ExitButton>

ExitButtonにprimaryを追加し、<ExitButton>個のカーネルコンポーネントにprimaryを渡します.サスペンションまで、別々に造形できます.

 ${props =>
    props.primary &&
    css`
      width: 45%;
      background: ${theme.orange};
      color: white;

      &:hover {
        background-color: ${theme.deepOrange};
      }
    `}