Events in React
버튼 만들기
use vanillaJS
<!--vanilla.html-->
<body>
<div id="root">
<div>
<h3>Total clicks:0</h3>
<button id="btn">Click me</button>// 1
</div>
</div>
</body>
<script>
let counter=0;
const button= document.getElementById("btn"); //2
const span = document.querySelector("span"); //3
function handleClick(){
counter = counter+1;
span.innerText=`Total clicks: ${counter}`;
};
button.addEventListener("click", handleClick);//4
</script>위 코드의 id="btn"을 이용한 동작을 대체하는 코드를 JavaScript로 작성해보자.
button에 event listener를 줘 보자.
React JS
<!--index.html-->
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById("root");
//id가 root인 요소을 가져온다.
const h3 = React.createElement("h3",{
id="title",
onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a title");
//속성은 없고, 내용은 있는 span 태그를 생성한다.
const btn = React.createElement("button", {
onClick: ()=>console.log(''), /*button이 클릭 될 때마다 함수가 실행된다. 위 코드의 1~4까지의 내용을 코드 한번에 대체 가능하다.*/
}, "Click me");
const container = React.createElement("div", null, [h3, btn]);
//속성은 없고, 변수 이름이 h3 btn인 태그를 array형태로 가진 div태그를 생성한다.
ReactDOM.render(container,root); //root 아래에 div를 render하는데, 그 안에 h3과 button이 있다.(container를 HTML형식으로 반환한다.)
</script>JSX (createElement 대체 코드 생성)
JSX는 JavaScript를 확장한 문법이다. HTML과 흡사한 문법을 사용해서 React 요소를 만들 수 있게 해준다. (개발자들 입장에서 편한 코드)
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title =(
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
); //아래 주석 처리 된 코드와 같은 의미의 코드이다.
/*const h3 = React.createElement("h3",{
id="title",
onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a title");*/
const Button =(
<button onClick={()=>console.log('')}>Click me
</button>
);
/*const btn = React.createElement("button", {
onClick: ()=>console.log(''),
}, "Click me");*/
const Container = (
<div><!--Title과 Button 넣어야 함--></div>
);
ReactDOM.render(Container,root);
</script>브라우저가 JSX를 온전히 이해하는 것이 아니라 에러가 발생한다.
JSX를 createElement형식으로 변환해줘야 브라우저가 이해할 수 있다. 변환을 위해 코드를 변환해주는 Babel을 사용해보자.
script src주소로 babel을 넣어주고, type을 babel로 설정했다.
Babel은 JSX를 브라우저가 읽을 수 있는 코드(React JS)로 바꿔서 head에 담아놓는다. (개발자도구 열어서 html 코드를 보면 알 수 있다.)
JSX 변수 JSX 안에 넣기
Container에 Title과 Button을 포함시키기 위해서 변수를 함수로 변경해줘야 한다.
함수의 형태이기 때문에 동일한 코드를 재사용할 수 있다.
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Button = () => (
<button onClick={()=>console.log('')}>Click me
</button>
);
// Button 함수가 button React Element를 반환하고 있다.
const Container =()=> (
<div>
<Title /> /*Title의 return 안의 내용을 붙여넣은 것과 같은 효과이다.*/
<Button />
<!--여기에 Button태그를 더 넣을 수 있다. 각각의 태그들은 각각의 이벤트 리스너를 가진다. 첫번째 버튼을 클릭한 경우와, 두번째 버튼을 클릭한 경우가 다르게 인식되어 console창에 각각 다르게 횟수가 찍힌다.-->
</div>
); //div 태그를 렌더링하고 있는 컴포넌트가 하나 있는데, Title에 관련된 코드를 포함시키고 있다.
//컴포넌트의 첫 글자는 대문자여야 한다. 소문자라면 React 와 JSX에서 HTML태그라고 인식된다.
ReactDOM.render(<Container />,root);
</script>State
state는 데이터가 저장되는 곳이다. vanilla JS의 예제를 보면 counter를 증가시키고 UI에 디스플레이 하는 부분이 있는데, 그걸 state로 만들 수 있다. #3.0 듣는중
