리액트 이벤트 주기
중간 중간에 코드가 섞여있기도 하고 색상이 다양하게 나눠져 있는게 더 가독성이 좋아
그냥 코드블럭으로 메모를 했습니다.
참고 해주세요 ;-)
function f(){
// 버튼이 클릭 되면 실행시키고 싶은 함수
}
html 에서는
<button onclick="f(); f2();">버튼!</button>
--> 이름없는 함수(익명함수)가 만들어짐
정확하게 말하자면 이렇게 실행이 됨
()=>{
f(); f2();
}
react 에서는
// javascript 함수 자체를 알려줘야함
<button onClick={f} >버튼!</button>
특정 변수 속에 있는 값이 달라진다면
화면을 다시그려줘(re-rendering) 라고 명령
리액트의 hook함수(use로시작하는함수) useState 함수를 사용해야 한다
함수
1. 인자?
값1개, state변수의 초기값
2. 동작?
state변수와 setState함수를 만들어준다
3. 함수사용결과?
2칸짜리 배열, [ state변수, setState함수 ]
state 변수란?
컴포넌트안에서 변수 안에 들어있는 값이 달라지면
다시 그 컴포넌트를 그려줘야하는 경우에는 그 변수를 state변수로 만들어서
관리한다
setState 함수란?
만들어진 state변수 속의 값을 변경시켜주는 함수
state 변수 속에 대입해야하는 값을 설정해주는 함수,
state 변수에 대입연산자를 사용하여 직접 변경하면 원본이 훼손되기때문에
절대로 state 변수에 대입연산자 쓰면 안되고,
--> ++ -- += -=
setState함수를 통해 변경해줘야 한다
구조분해할당
let [a, b] = [10, 20]
// a 속에는 무엇이? --> 10
// b 속에는 무엇이? --> 20
조금만 더 복잡하게 가보자
function tmp(){
function abc(){
return 500;
}
return [10, abc]; // return [10, abc()];라고 썼으면
}
let [a, b] = [10, abc];
// a 속에는 무엇이? --> 10
// b 속에는 무엇이? --> abc / 500이 나올 수 있다
자 그러면 이제
3. 함수사용결과?
2칸짜리 배열, [ state변수, setState함수 ]
let [a, b] = useState();
// a ? --> state변수
// b ? --> setState함수
react는 변화가 없는것 같으면 원본을 훼손하지 않으려고 하기때문에
setState함수를 사용해야 원본값을 바꿀 수 있다
그래서 세트로 나온거임
b(100); 을 넣어봤는데
원본하고 달라졌으니까 다시 그려주네?
변수 속에 있는 값이 변하면 다시 그려져야할 경우에
그 변수를 state변수로 만든다
대신 state변수 속에 있는 값을 변경할 때는 대입연산자로 직접 변경하는 것이
아니라 setState변수를 통해서 변경을 해줘야 한다
++number
number++
--> number += 1
--> number = number + 1
자식 컴포넌트(컴포넌트 분리)
state변수의 상태가 바뀌어서 re-rendering된다면
자기 자신이 속해있는 컴포넌트가 다시 re-rendering 된다
이벤트가 발생하면 실행되는 함수의 매개변수에는 자동으로
발생한 이벤트에대한 정보(어떤이벤트인지? x좌표, .., 어떤태그에서 발생한이벤트인지)들이
들어있는 이벤트객체가 인자로 전달이 된다
클릭 이벤트가 발생하면
이벤트 객체.target에는 클릭이벤트가 발생한 html태그(요소)가 객체로 들어있다
input태그에서 이벤트가 발생하면
이벤트객체.target에 발생한 input태그 객체가 들어있고,
input태그에 입력한 값은 input태그 안에 value에 들어있다
--> 이벤트객체.target.value --> 사용자가 input태그에 입력한 값
*keycode
+다음수업
배열에서 map함수를 사용하여 여러개의 반복되는 컴포넌트를 간단히 그려보기
d01state.js
import styled from "@emotion/styled";
import { useState } from "react";
const AWrap = styled.div`
border: 3px solid red;
`;
const A = ()=>{
let [msg, setMsg] = useState('메시지');
const tmp = (e)=>{
// change 이벤트가 발생하면 실행되는 함수
console.log('change이벤트 발생함');
// let myInput = document.querySelector('input');
// setMsg('myInput');
// abc에는 무엇이 들어있을까?
console.log(e); // abc는 무슨 타입? Event타입의 객체
// abc.target에는 이벤트가 발생한 태그가 들어있음(input태그)
// 우리가 입력한 값은 input태그.value에 들어있음
// set함수 사용
setMsg(e.target.value);
}
// 엔터키가 입력된다면 실행시킬 함수
const enterPressed = (e)=>{
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>
);
}
// javascript가 StatePage() 함수를 실행 시켜줌
const StatePage = ()=>{
// 변해야되니까 변수 만들자(일반적인 javascript 변수)
// 얘를 state변수로 만들어줘야 react가 이 값을 추적하게 된다
// let number = 0;
const [number, setNumber] = useState(0); // 자기가 속해있는 컴포넌트를 계속 다시 그려주는거임(좀 비효율적이지 않음?)
// StatePage함수 안쪽에 만들어진 함수는 이 영역 안에서만 사용 가능!
const normalClick = ()=>{
console.log('기본 버튼이 클릭됨!');
}
// 클릭 됐을때 실행 시킬 함수 생성
const plusClick = ()=>{
console.log('클릭전 number:', number);
// number++; 컴퓨터가 비교할 값이 없어지니까
// number = 100;
setNumber(number + 1); //setNumber(number++); 이거는 왜 안되지?
console.log('클릭후 number:', number);
}
const minusClick = ()=>{
setNumber(number - 1);
}
return(
<>
<h1>스테이트 컴포넌트</h1>
{/* 컴퓨터 : 어? 자바 스크립트로 해석하라고 하네? */}
<h2>{number}</h2>
{/* {normalClick()} XX */}
<button onClick={normalClick}>기본버튼입니다</button>
<br/>
<button>-</button>
<button onClick={plusClick}>+</button>
<A/>
</>
);
}
export default StatePage;
Slowly but surely