React 실습 - 11 : 이제 꾸며보자ㅏㅏㅏ

이제 html을 약간 손보고 css도 해보자ㅏㅏ!!!!

 

우선, div를 section class="container"로 바꿔주고!

"Loading"을 HTML로 만들자

<div class="loader">

  <span class="loader_text">Loading...</span>

</div>

이렇게 추가한다면!

이렇게 나오지!?

오케이!

그리고 movie를 movie component로 만들거야!

 

이렇게 해보자!

()를 넣어서 좀 더 보기 쉽게 정리 했어!!

 

그리고 Movie.js에서

이렇게 수정!

실습하는데 ID는 필요 없어서 빼놨어!!

런 !!

오마갓! 멋져멋져~

 

이제 예쁘게 만들어보자고!

create-react-app 덕분에 css 통합이 너무 너무 쉬워!

 

react에 많은 옵션으로 component를 더 멋지게 만들 수 있어!

 

지금은 style component를 써보자!

사실 이 부분도 조금 배우긴 해야되는데

빠르게 넘어 가보자

 

우리가 style을 주기 위해선 style={{ 속성 : "값" }} 이렇게 표기를 해야돼 !

그러면 JS에서 css style을 사용 할 수 있어!

 

이러한 방법이 있긴 한데 사실 추천하지는 않아..

그래서 다른 방식이 있는데 !

css file을 만드는거야!

 

src폴더 안에 Movie.css랑 App.css file을 만들어보자!

아직 기입한건 없지만 import를 해두자!!

 

App.js에는 App.css를

Movie.js에는 Movie.css를 !!

 

여기서 import할 때는 어떤 함수도 import할 필요가 없기 때문에

그저 css 경로만 입력해주면 돼!

오케이!

이제 class선언 해둔 걸로 css 선언을 할 수 있어!

 

React를 배우고 있으니까 css에 관한 설명은 따로 하지 않을게!!

 

다음으로 고고고고~~

 

 

참조 : nomadcoders.co