🐾 리액트 이벤트 주기
📒 첫번째 차이점
📍onclick="f()"
📍onClick={f}
function f(){
// 버튼이 클릭되면 실행시키고 싶은 함수
}📒 html에서는
<button onclick="f();">버튼!</button>
👉👉 이름 없는 함수가 만들어짐.
이렇게 실행이 됨
()=>{
f();
}📒 react에서는
// javascript 함수 자체를 알려줘야된다
<button onClick={f}>버튼!</button>버튼을 눌러도 console.log에는 찍히는데, 숫자는 바뀌지가 않는다. 💁🏻♀️ WHY?
const StatePage = () => {
//함수
const normalClick = () => {
console.log('클릭이전',normalClick);
console.log('normalClick');
console.log('클릭이후',normalClick);
}
return (
<>
<h1>state component</h1>
<h2>0</h2>
<button onClick={normalClick}>기본버튼입니다!</button>
<br />
<button>-</button>
<button>+</button>
</>
);
}
export default StatePage;✏️ 특정 변수 속에 있는 값이 달라진다면,
화면을 다시 그려줘(re-rendering)라고 명령 ❗️
리액트의hook 함수(use로 시작하는함수)useState함수를 사용해야 한다.
const StatePage = () => {
let number = 0; //기본변수값설정
//함수
const normalClick = () => {
console.log('normalClick');
}
const plusClick = () => {
number++;
}
return (
<>
<h1>state component</h1>
<h2>{number}</h2>
<button onClick={normalClick}>기본버튼입니다!</button>
<br />
<button>-</button>
<button onClick={plusClick}>+</button>
</>
);
}
export default StatePage;📒 useState함수
📍1.인자
값1개,state변수의 초기값
📍2.동작
state변수와setState함수를 만들어준다
📍3.함수사용결과
2칸짜리 배열,[ state변수, setState함수 ]
1. 인자
값1개, state변수의 초기값
let [number, setNumber] = useState(0); //초기값은 0
2. 동작
📒 state 변수란?
컴포넌트안에 변수 안에 들어있는 값이 달라지면
다시 그 컴포넌트를그려줘야하는경우에는 그 변수를state변수로 만들어서
관리한다.
📒 setState함수란?
만들어진 state변수속의 값을 변경시켜주는 함수.
state 변수속에 대입해야하는 값을 설정해주는 함수,
state변수에 대입연산자를 사용하여 직접 변경하면원본이 훼손되기때문에
절대로state변수에 대입연산자 쓰면안되고,
👇++ -- += -= /= ....
setState함수를 통해 변경해줘야 한다❗️setNumber(number++); //이렇게 쓰면 안되는 이유: 2번 출력 //원본이 훼손되면 안되기떄문에/ 비교가 불가능해짐 setNumber(number+1); //이렇게 사용해야함
📌 구조분해할당
//📍기본적으로 (state변수)
let [a,b] = [10,20];
// a=10, b=20
//📍여기서조금더 복잡하게 간다면?
function tmp(){
return [10, 20];
}
let [a.b] =tmp();
// a=10, b=20
//📍여기서 조금 더더 복잡하게 가면?
function tmp(){
function abc(){
return 500;
}
return [10,abc];
}
let [a,b] = tmp();
// a=10, b=abc함수
//📍b를 함수로 쓸수있는가?
b();
👉 YES! b는 함수로 쓸 수 있다.
// b()는 500이라는 값을 리턴한다.3. 함수사용결과.2칸짜리 배열, [ state변수, setState함수 ]
let [a,b] = useState(); // a는 state변수, b는 setState함수
💁🏻♀️ 예시를 봐보자.
일단은, useState를 import해야한다.
import { useState } from "react";
const StatePage = () => {
let [number, b] = useState(0);
//state변수 number 에 0
//b는 함수(setState함수)
//함수
const normalClick = () => {
console.log('normalClick');
}
const plusClick = () => {
// number++;
b(100); //number가 100이 대입되어야한다
}
return (
<>
<h1>state component</h1>
<h2>{number}</h2>
<button onClick={normalClick}>기본버튼입니다!</button>
<br />
<button>-</button>
<button onClick={plusClick}>+</button>
</>
);
}
export default StatePage;👇 b 가 setNumber로 변경.
const StatePage = () => {
let [number, setNumber] = useState(0);
//state변수 number 에 0
const plusClick = () => {
// number++;
setNumber(100); //number가 100이 대입되어야한다
}
import { useState } from "react";
const StatePage = () => {
let [number, setNumber] = useState(0);
//state변수 number 에 0
//setNumber는 함수(setState함수)
//함수
const normalClick = () => {
console.log('normalClick');
}
const plusClick = () => {
setNumber(number + 1); //number가 +1 를 컴퓨터가 기억하고, setNumber 저장
//setNumber(number++);
//이렇게 쓰면 안되는 이유: 2번 출력
//원본이 훼손되면 안되기떄문에/ 비교가 불가능해짐
}
const minusClick = () => {
setNumber(number - 1);
}
return (
<>
<h1>state component</h1>
<h2>{number}</h2>
<button onClick={normalClick}>기본버튼입니다!</button>
<br />
<button onClick={minusClick}>-</button>
<button onClick={plusClick}>+</button>
</>
);
}
export default StatePage;✏️ 변수속에 있는 값이 변하면 다시 그려져야할 경우에,
그 변수를state변수로 만든다.
대신 state변수 속에 있는 값을 변경할 때는 대입연산자로 직접 변경하는 것이
아니라setState변수를 통해서 값을 변경해준다
🎬 const 로 변경 해준다
오류발생을 막히위해, 혹시나 number에 100을 넣으려고하면 warning으로 number is const라고 뜬다. 너이미 number있는데?하면서
let [number, setNumber] = useState(0); 👇 const [number, setNumber] = useState(0);📌 자식 컴포넌트 (컴포넌트 분리)
state변수의 상태가 바뀌어서re-rendering된다면,
자기 자신이 속해있는 컴포넌트가 다시re-rendering된다
🎬 이벤트가 발생하면 실행되는
함수의 매개변수에는 자동으로
발생한 이벤트에대한 정보(어떤이벤트인지? x좌표, .. ,어떤태그에서발생한이벤트인지)들이
들어있는 이벤트객체가 인자로 전달이 된다
✏️ 클릭이벤트가 발생하면,
이벤트객체.target에는 클릭이벤트가 발생한 html태그(요소)가 객체로 들어있다.ex)e.target
✏️ input태그에서 이벤트가 발생하면,
이벤트객체.target에 발생한input태그객체가 들어있고,
input태그에 입력한 값은input태그안에value에 들어있다
👇👇
이벤트객체.target.value --> 사용자가 input태그에 입력한 값eTargetValue.js
import styled from "@emotion/styled";
import { useState } from "react";
const AWrap = styled.div`
border: 3px solid red;
`;
const A = ()=>{
const [msg, setMsg] = useState('메시지');
// tmp 는 change 이벤트가 발생하면 실행되는 함수
const tmp = (e)=>{
console.log('change이벤트 발생함');
// 매개변수 e 에는 무엇이 들어있을까? //!보통 매개변수 e는 event 객체를 받아기 때문에 e라고 이름을 붙임
console.log(e);
// e.target에는 이벤트가 발생한 태그가 들어있음(input태그)
// 우리가 입력한 값은 input태그.value에 들어있음
console.log(e.target.value);
setMsg(e.target.value);
//입력값이 setMsg함수에 저장된다.
}
return (
<AWrap>
<h1>A컴포넌트영역입니다</h1>
<input onChange={tmp}/>
<p>{msg}</p>
</AWrap>
);
}
enterPress.js
import { useState } from "react";
// 엔터키가 눌릴떄마다 실행시킬 함수
const enterPressed = (e) => {
const [msg, setMsg] = useState('메시지');
console.log('onKeyDown이벤트 발생함');
// 엔터가 눌렸을 때
console.log(e);
//setMsg('메시지');
// e.keyCode 엔터는 13이 들어있음
if (e.keyCode === 13) {
setMsg('엔터클릭됨');
} else if (e.keyCode === 27) {
console.log('esc눌림');
e.target.blur();
//깜빡깜빡 거리지않게
}
}
return (
<AWrap>
<h1>A컴포넌트영역입니다</h1>
<input onChange={tmp} onKeyDown={enterPressed} />
<p>{msg}</p>
</AWrap>
);
}
엔터를 누른후, console.log로 출력해보면
key:"Enter", keyCode:13오른쪽 화살표를 누른후, console.log 출력해보면
key: "Arrow right", keyCode:39이렇게 출력된다.
