직전 포스터에서 만들 폴더에서 코드열고 npm start 해주세요
그리고 component/example2.jsx파일 만들어주세요
import { useReducer } from "react";
const reducer = (state, action) => {
if (action.type === "plus") return { count: state.count + 1 };
return state;
};
export default function Example2() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>{state.count}</p>
<button onClick={click}>클릭</button>
</div>
);
function click() {
dispatch({ type: "plus" });
}
작성
이제 설명해보겠습니다.
useReducer는 첫번재인자로 함수 두번재 인자는 기본값이 들어 갑니다.
첫번째 함수에 첫번재 인자로 정의한 변수가 들어가고 두번째 로는 dispatch로 반환한 것이 들어갑니다.
그래서 기본값이 count:0이고
function click() {
dispatch({ type: "plus" });
}
여기서 type:plus를 반환해주었습니다.
그래서 state로 기존에 있던 데이터를 가져오고 action 으로 dispatch가 반환해준 값으로 어떤행동을 할지 정해줄수 있습니다.
이렇게 기존의 데이터를 이용하여 조작을 할때 사용하게 됩니다.
App.js를
import logo from "./logo.svg";
import "./App.css";
import example from "./component/example1";
import auseHasMounted from "./hook/usehasmmounted";
import Whm from "./hook/whm";
import Example2 from "./component/example2";
function App({ hasmount }) {
const wid = example();
const whm = Whm();
console.log(hasmount, whm);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
{wid}
<Example2 />
</header>
</div>
);
}
export default auseHasMounted(App);
작성
실행 해보면
이렇게 클릭시마다숫자가 증가하는것을 불수 있습니다.
이제 exapmple2안에 내용을 지우고
import { useState } from "react";
function sum(person) {
console.log("sum");
return person.map((person) => person.age).reduce((l, r) => l + r, 0);
}
export default function Example2() {
const [value, setValue] = useState("");
const [person] = useState([
{ name: "dfa", age: 39 },
{ name: "fdsdfa", age: 28 },
]);
const count = sum(person);
return (
<div>
<input value={value} onChange={change} />
<p>{count}</p>
</div>
);
function change(e) {
setValue(e.target.value);
}
}
이걸로 변경
input 에 입력하면 value라는 변수에 글자를 저장하고 그글자가 다시 input창에 입력이 될것입니다.
count 는 person에 있는 객체 내부의 age라는 요소의 값을 더해서 배출하게 될것입니다.
reduce함수는 두개의 인자를 받는데 왼쪽에는 기존에 있던 값 두번재는 새로들어온값 이렇게 받게 됩니다.
그리고 함수를 다적고,를 적고 기본값을 할당합니다.
즉 여기서 기본값은 0이고 함수 내용은 기존값과 새로온값을 더하는 것입니다.
기본값이 0이고 맨처음 39가 들어오니까 0+39가 되고 0+39의 기존갑세 +28을 하게 되는 겁니다.
count라는 변수는 sum이라는 함수의 return값이 저장되는 변수 입니다.
그럼이제 npm start 화면가서 input에 글자를 입력 해보겠습니다.
이렇게 count변수는 변하지 않는데 의미 없이 sum함수가 계속 실행이 됩니다.
value값이 변함에따라서 모든 요소가 실행이 되는 겁니다.
이걸 막기위해 usememo를 써보겠습니다.
count를
const count = useMemo(() => {
return sum(person);
}, [person]);
이렇게 바꺼주면 됩니다.
즉 person 값이 바뀔때만 sum함수가 작동이 되게 됩니다.
import { useCallback, useMemo, useState } from "react";
function sum(person) {
console.log("sum");
return person.map((person) => person.age).reduce((l, r) => l + r, 0);
}
export default function Example2() {
const [value, setValue] = useState("");
const [person] = useState([
{ name: "dfa", age: 39 },
{ name: "fdsdfa", age: 28 },
]);
const count = useMemo(() => {
return sum(person);
}, [person]);
const click = useCallback(() => {
console.log(value);
}, []);
return (
<div>
<input value={value} onChange={change} />
<p>{count}</p>
<button onClick={click}>클릭</button>
</div>
);
function change(e) {
setValue(e.target.value);
}
}
이렇게 변경을하면
input에 입력을하고 버튼을 클릭해도 로그에는 계속 빈공간만 찍힐것입니다.
이렇게 특정조건에따라 작동이되고 안되고 조절을 할수 있습니다.
이제 exapmple.jsx를
import { createRef, useRef, useState } from "react";
export default function Example2() {
const [value, setValue] = useState("");
const input1Ref = createRef();
const input2Ref = useRef();
console.log(input1Ref, input2Ref);
return (
<div>
<input value={value} onChange={change} />
<input ref={input1Ref} />
<input ref={input2Ref} />
</div>
);
function change(e) {
setValue(e.target.value);
}
}
작성해주겠습니다.
내용은 기존에꺼랑 큰차이가 없습니다. useREf,createRef의 차이를 알아보도록 하겠습니다.
npm start 창가서 콘솔창을 보면
1Ref는 계속 null인데 2ref는 undeffined 갔다가 input으로 됩니다. 즉 1ref는 render되고 연결이 되는 것이고
2ref는 render되기전에도 연결되어 있다는 뜻이 됩니다.
오늘으 hook을 여기까지 알아 보겠습니다.
