[ ANOTHER CLASS 101 ] - 2차 프로젝트 (4DAY)

박소윤·2020년 12월 31일
0
post-thumbnail

# 크리에이터 센터

크리에이터 센터 Header / Aside / Footer 레이아웃 폼을 제작완료상태

# 기능 구현

styled-component는 알수록, 신기한것 같다.

# useState 사용하여 페이지를 클릭해서 이동해보고, 중복된 버튼을 재사용 해보자.

[ 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를 통해 리턴위에 비구조 할당으로 한줄 처리하여, 인자와 변경값을 각각 사용하고자하는 스타일컴포넌트에 할당하여 함수를 선언하고, 함수안에 내용을 단순하게 적어 효율을 이끌어내는 결과물이 나온다.


# styled-component 활용!

styled-component 는 벗기면 벗길수록 신기한 느낌을 받는다.

- 내가 사용하고픈 방법 : 외부 컴포넌트( Footer.js )의 내부에서 스타일드 컴포넌트를 만들어 ( 버튼 )의 스타일을 지금 내가 제작중인 컴포넌트( Index.js )에 가져와서 스타일드 컴포넌트를 재사용해서 스타일을 일부만 변경 하고싶다!

[ Footer.js ]

  1. 외부에 사용하고싶은 스타일드 컴포넌트를 export 한다.

[ Index.js ]

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

  1. 사용하고자 하는 컴포넌트 상단에 import 끌어오고, 사용하길 원하는 부분의 스타일드안에 가져온 스타일드 컴포넌트를 감싼다.
    그후 변경하거나 추가할 스타일링을 ExitButton 컴포넌트에 작성하면 끝.

  • 버튼 2개에 공통적요소를 선언하고, 각자 다른부분을 스타일링을 넣을경우는 아래와 같이 한다.
<ExitButton onClick={handleTogoMain}>나갈래요</ExitButton>
<ExitButton onClick={handleExit} primary>계속 작성할래요</ExitButton>

ExitButton 안에 primary를 추가하고, <ExitButton> 스타일드 컴포넌트안에 프롭스로 넘겨준다. hover까지 별도로 각각 스타일할 수 있다.

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

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

profile
흐르듯 그리는 Front-end

0개의 댓글