크리에이터 센터 Header / Aside / Footer 레이아웃 폼을 제작완료상태
styled-component는 알수록, 신기한것 같다.
[ 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 는 벗기면 벗길수록 신기한 느낌을 받는다.
- 내가 사용하고픈 방법 : 외부 컴포넌트( Footer.js )의 내부에서 스타일드 컴포넌트를 만들어 ( 버튼 )의 스타일을 지금 내가 제작중인 컴포넌트( Index.js )에 가져와서 스타일드 컴포넌트를 재사용해서 스타일을 일부만 변경 하고싶다!
[ Footer.js ]
[ Index.js ]
import Footer, { Button } from './Components/Footer';
import styled, { css } from 'styled-components';
<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};
}
`}