이번 시간엔 components styled에 대해 배워보자!
components styled는 컴포넌트를 동적으로 만들수도 있고 디자인도 동적으로 만들 수 있다. 그러면서 파일에도 작성 할 수 있다.
먼저 구글에 styled component를 검색해서 해당 사이트를 접속 후 Documentation - installation으로 가서
npm install ~을 그대로 복붙한다.
다시 Document에 Getting Start로 가면 예시가 있는데 동그라미 친 부분을 한번 해보자!
styled를 import해주고 저 코드는 h1이라는 태그를 가상으로 만들고 이거는 기본 자바스크립트라고 치면 let t = document.createElement("h1") 이거랑 똑같은거임
그리고 스타일 추가시 t.style.color='red' 이 코드랑 같은 의미이다.
위에 만든 Title을 적용하여 화면에 출력하였다. (오... 신기해..)
이 방식과 css파일로 하는 방식의 차이는 이건 js파일 안에 들어와 있으므로 따로 css파일을 import 하지 않아도 된다. 하지만 css파일로 만들면 재사용이 쉽긴 하다는점.
그래서 이렇게 따로 js파일을 만들어서 import 하여 관리를 할 수도 있다.
다음은
이렇게 하나의 컴포넌트를 생성했는데(재사용을 위해), 여기서 장점은 js파일과 css파일이 합쳐져 있기때문에 관리하기가 편하다. 그리고 아까 만든 헤더를
이렇게 넣어주면 끝
이런식으로 헤더와 푸터, 바디부분인 로그인을 출력할 수 있다.
방금 만든것들은 로그인에 관련된 페이지이므로 따로 pages라는 폴더로 안에 LoginPage.js 파일을 만들어 그 안에 코드를 때려 박고
App.js에는 LoginPage하나만 넣어주면 더 깔끔하게 관리 할 수 있다.
요약하자면 페이지는 컴포넌트들의 조합, 내가 컴포넌트를 만들어놓으면 재사용 할 수 있다.
이번 게시물은 여기까지!
이 글은 유튜브 메타코딩 채널의 영상을 보고 공부한 내용을 기록한 게시글입니다.
