Hook에 대해서 알아보자 Hook은 정말 많은 도움이 된다. 우리가 일반적으로 자주쓰지만 길어지는 것을 한단어로 압축해서 코드를 줄여 주었다. ㅎㅎ 정말 편하다.
그럼 훅을 이용하여 코드가 어떻게 줄여 지는지 알아 보자 create react app만들고 npm start 하자
그리고 이렇게 src/component/example.jsx를 만들자
import React from "react";
class Example extends React.Component {
state = {
count: 0,
};
render() {
return (
<div>
<p>{this.state.count}입니다.</p>
<button onClick={this.click}>클릭</button>
</div>
);
}
click = () => {
this.setState({ count: this.state.count + 1 });
};
}
export default Example;
이걸 채워 넣어주면 우리가 기본적으로 알수 있는것이다.
src/App.js 가서
import logo from "./logo.svg";
import "./App.css";
import Example from "./component/example";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Example />
</header>
</div>
);
}
export default App;
추가
이렇게 수정해주면 npm start화면에서 클릭할때마다 숫자가 올라가는걸 확인할수 있습니다.
그럼이제 componenet/example2.jsx폴더를 만들어 주겠습니다.
import React from "react";
export default function Example2() {
const [count, setcount] = React.useState(0);
return (
<div>
<p>{count}입니다.</p>
<button onClick={click}>클릭</button>
</div>
);
function click() {
setcount(count + 1);
}
}
이걸 채워놓고
app.js에 가서
import logo from "./logo.svg";
import "./App.css";
import Example from "./component/example";
import Example2 from "./component/example2";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<Example />
<Example2 />
</header>
</div>
);
}
export default App;
이렇게 수정해주세요
이제 npm start에 가서 확인해보면 둘다 똑같은 기능을 하는것을 알수 있습니다.
그럼 어떻게 똑같은 기능을 하는지 알아 봅시다.
const [count, setcount] = React.useState(0); 이 hook이 핵심입니다
const[state이름,state를조작할함수이름]=React.useState(기본값으로 설정해줄 값);
이렇게 함으로써
this.setState({ count: this.state.count + 1 });
이거 두개를 한번에 해결해 주었습니다.
그리고 this가 여기저기서 빠진게 보일건데 기존에는 const나 let var function이런게 없어서 변수를 생성하는게 아니였지만 현재는 const,function이 붙어있어서 변수생성입니다. 그래서 this없이 사용이 가능합니다.
example 2의 내용을 이렇게 바꺼줘봅시다
import React from "react";
export default function Example2() {
const [state, setstate] = React.useState({ count: 0 });
return (
<div>
<p>{state.count}입니다.</p>
<button onClick={click}>클릭</button>
</div>
);
function click() {
setstate({ count: state.count + 1 });
}
}
그럼 이것도 확인해보면 제대로 잘 작동하는것을 알수 있습니다.
그럼 이것에 대해서 알아보도록 하죠
const [state, setstate] = React.useState({ count: 0 });즉 여기서 기본값에 객체로 count:0을 넣었습니다. 그럼
state={count:0}이므로 example1이랑 똑같아 집니다. 기본값으로 숫자 뿐만 아니라 객체도 넣을수 있어 여러개 넣을수 잇습니다. 그럼 이제 count를 꺼낼려면 state안에 들어가서 count를 찾아야됩니다. 그래서 state.count가 됩니다.
똑같이 setState도 객체를 변화주는거이므로 객체 내부내용을 바꾸는거처럼 해야됩니다.
즉 state={count:0}이였는데 state={count:state.count+1}이런식으로 바뀌는 겁니다.
그래서 똑같이 작동이 하게 됩니다.
setstate((state) => ({ count: state.count + 1 }));
setstate({ count: state.count + 1 });
d이거는 비슷햅보이지만 살작 다릅니다 위에꺼는 state에 받아서 변경을 하고 return하는 거이기 때문에 받고나서 변경이 있더라도 영향을 받지 않습니다. 하지만 밑에꺼는 바로 가져오는거기 때문에 다른거의 변화에 의해 영향을 받게 됩니다.
example2.jsx를
import React from "react";
export default function Example2() {
const [state, setstate] = React.useState({ count: 0 });
React.useEffect(() => {
console.log("mount", state.count);
return () => {};
});
return (
<div>
<p>{state.count}입니다.</p>
<button onClick={click}>클릭</button>
</div>
);
function click() {
setstate((state) => ({ count: state.count + 1 }));
}
}
이렇게 변경하고 ctrl+shift+i로 콘솔 창을 확인해봅시다
시작
누를때마다
이렇게 시작할때 한개뜨고 숫자가 바뀔때마다 한개씩 더뜰것입니다.
이것으로 useEfffect는 mount될때 한번 update될때마다 한번씩 실행되는걸 알수 있습니다.
React.useEffect(() => {
console.log("mount", state.count);
return () => {};
}, []);
이런식으로 []를 추가하고 보면
마운트 할때만 실행되고 update될때는 실행이 안됩니다.
이건 왜그럴까 할수있는데 []안에 들어가있는 특정 변수가 update될시 실행이 됩니다.
즉 현재 아무것도 없으므로 count가 업데이트 된다고 해서 실행되지 않습니다.
그럼 count를 넣어 보겠습니다.
이렇게 업데이트 될때마다 변경 되는것을 알수 있습니다.
이제
React.useEffect(() => {
console.log("mount", state.count);
return () => {
console.log("return", state.count);
};
}, [state.count]);
이렇게 바꿔 줘 봅시다
이렇게 보면 mount될때는 별다를게 없느데 update 할때 return 0가찍혔습니다. 이건왜그럴까 의문일수 있습니다.
즉 return 내부에 있는것은 update되기 바로 직전에 실행되고 그다음에위에 함수내용이 찍힌다느것을 알수있습니다.
이러한 hook들로 우리는 많은 코드를 줄일수 있고 유용하게 사용할수 있습니다.
