리액트에서 이벤트를 실행하는 방법과 스타일을 적용하는 방법을 배워보자.😊
이벤트 취급 방법
리액트에서는 이벤트 등을 캐멀 케이스로 작성한다.
💙 캐멀 케이스 표기법
onclick ❌
onClick ⭕
onchange ❌
onChange ⭕
그리고 JSX에 작성되어 있는 HTML과 같은 태그 안(return 이후 등)에서는 { }로 감싸서 자바스크립트를 작성한다.
이를 바탕으로 버튼을 클릭했을 때 alert가 실행되는 기능을 구현하면 다음과 같다.
🔽 alert 기능 구현
// App.js
export const App = () => {
// 버튼 클릭 시 실행되는 함수 정의
const onClickButton = () => {
alert();
};
return (
<>
<h1>Hello!</h1>
<p>안녕하세요!</p>
<button onClick={onClickButton}>버튼</button>
</>
);
};
버튼을 클릭하면 브라우저의 alert가 표시된다. 위에서 설명한 캐멀 케이스와 = 뒤에는 자바스크립트에서 정의한 함수명을 할당하므로 { }로 감싸서 함수명을 작성한다. 이것이 리액트에서 이벤트를 할당하는 기본 방법이다.
스타일 취급 방법
일반적인 HTML/CSS와 마찬가지로 리액트에서도 각 태그에 style 속성을 기술해 스타일을 적용할 수 있다. 단, CSS의 각 요소는 자바스크립트 객체로 기술하는 점에 주의해야 한다.
🔽 글자 색을 파란색으로 변경
export const App = () => {
// ...생략
return (
<>
<h1 style={{color: "blue"}}>Hello!</h1>
<p>안녕하세요!</p>
<button onClick={onClickButton}>버튼</button>
</>
);
};
이벤트와 마찬가지로 style을 지정해 자바스크립트를 작성한다. style={ }과 같이 중괄호로 감싸고 그 안에 객채로 CSS에 대응하는 요소를 지정하기 style={ { } }과 같은 코드가 된다.
객체에서 CSS를 지정하는 방법은 속성명에 CSS 이름을 입력하고 값을 지정하면 된다. 자바스크립트 객체이므로 값은 blue가 아니라 "blue"로 입력해야 하는 점을 주의해야 한다. 일반적인 CSS와 동일한 방법으로 작성하면 에러가 발생한다.
자바스크립트의 객체로 지정할 수 있으므로 사전에 정의해둔 함수를 할당할 수도 있다. 다음은 p 태그의 글자를 파란색으로 변경하고 폰트 크기를 키운 예이다.
🔽 p 태그의 글자 색과 크기 변경
// App.js
export const App = () => {
// ...생략
// CSS 객체
const contentStyle = {
color : "red",
fontSize : "20px"
};
return (
<>
<h1 style={{color: "blue"}}>Hello!</h1>
<p style={contentStyle}>안녕하세요!</p>
<button onClick={onClickButton}>버튼</button>
</>
);
};
변수를 하나 삽입했지만 작업 자체는 같다. 단, font-size가 아니라 fontSize를 사용했다. 자바스크립트 객체 속성명에는 -(하이픈)을 허용하지 않으므로 이벤트처럼 CSS 속성명 역시 모두 캐멀 케이스로 작성한다.