[React]Chpater4_Styling,이벤트

React방식으로 Styling

 

리액트는 HTML문법이랑 살짝다른데 

 

1. class 선택자를 className으로 바꿔줘야 한다.

 

2.css 코드를 리액트 안에 인라인 스타일링 가능하다.

 

예를 들어 사진 2개를 넣어준 Images컴포넌트에

 

이런식으로 클래스 선택자가 설정되어 있다. 사진의 가로 세로 크기를 설정해준걸 지우고

이걸 앞서 만들었던 (Chapter3) 이미지의 틀을 생성해주는 컴포넌트인 ImageFrame에

style props를 넘겨준다.  style안에서는 가로,세로를 다시 설정해줄 수 있는데(style안에서는 css문법이 쓰여야 함)

style에 중괄호를 2번 썼다. 이건 JSX 문법에서 객체를 생성해준 것이다!

 

단, value는 string이여야한다!

 

다른 스타일링을 하고 싶을 때! 

 

https://emotion.sh/docs/introduction

Emotion - Introduction

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

이벤트 다루기

 

리액트에서 이벤트 handler 이름을 짓는 관례가 있는데

HTML에서 onClick 으로 받아주는 경우 리액트에서는 handle 어쩌구 ~ 로 이름을 지어야 하고

onMouseOver로 받아주는 경우 handle 어쩌구 Over로 이름을 지어줘야 한다. 

이렇게 MainImage 컴포넌트 안에 이벤트 핸들러 함수들을 넣어주는 방법이 있다.

만약 ⏩ 버튼이 클릭되면 -> 눌렀음이 콘솔창에 뜰꺼다!