React Blog - Button 컴포넌트

김민석·2020년 9월 4일
1

버튼 스타일링을 해보겠습니다.

위와 같이 디렉터리 생성후 Button.js 파일을 생성해서 작성해줍니다. 해당 컴포넌트에서 StyledButton을 바로 내보내도 되지만 굳이 Button 리액트 컴포넌트를 만들어 그 안에 StyleButton을 렌더링 해준 것은 나중에 해당 컴포넌트 사용시 자동으로 import 되게 하기 위해서 입니다.

Button 컴포넌트에서 {...props}를 설정 해준 이유는 Button이 받아 오는 props를 모두 StyledButton에 전달해준다는 의미입니다. 해당 컴포넌트를 List 컴포넌트에서 렌더링 해주면 됩니다.

그 후 List.js 에 import 해주면 됩니다.

버튼이 완성되었다면 프로젝트의 글로벌 스타일(index.css)을 수정하면 됩니다.

다음과 같이 바꿔 주겠습니다.

profile
web development 주니어

0개의 댓글