https://101developer.tistory.com/91
Hook 이란?
후킹은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채
101developer.tistory.com
Hook이 무엇이지 정확하게 이해가 되지 않으면 위 포스팅을 먼저 참조하세요!!!
Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
Reactd의 생명주기(lifeCycle)를 알아보면 컴포넌트(Component)가 최초에 화면에 rendering (MOUNTING) 되고, 상태가 변함에 따라 re-rendering (UPDATING) 되고, 더 이상 화면에 표출될 필요가 없어지면 UNMOUNT 되면서 생애주기가 끝이 납니다.
이전에는 이 생명주기 중간에 어떠한 작업을 수행하려면 컴포넌트(Component) 를 반드시 Class Component로 작성을 해야만 했습니다. 하지만 Hook을 이용하면 class를 작성하지 않고도 생명주기(lifeCycle)를 다룰 수 있게 해줍니다.
생명주기(lifeCycle) 중간 중간에 어떠한 추가적인 로직을 수행할 수있도록 하는 것이 React Hook입니다.
다시 말하면 React Hook은 기본적으로 각각의 시점 (mount, update, unmount 등) 직전 또는 직후에 어떠한 별도의 로직을 추가할 수 있게 해 주는 것입니다.
여기에서는 Counter 컴포넌트(Component) 를 만들고 useState Hook을 이용하는 간단한 예제를 만들어 보겠습니다.
State는 컴포넌트(Component) 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다.
Counter에서 증감하는 숫자를 저장해야 하고 업데이트시 리렌더링이 필요하므로 사용했습니다.
import { useState } from 'react'; 를 이용하여 useState Hook을 사용하겠다고 지정합니다.
const [counter, setCounter] = useState(0); 를 이용하여 상태를 관리할 객체를 만듭니다.
setCounter(prevCount => prevCount + 1);를 이용하여 상태값을 변경합니다.
여기에서 사용되는 useState가 React에서 제공하는 여러가지 Hook 중 한개입니다.
Counter.js 파일을 만듭니다.
|
import Button from 'react-bootstrap/Button';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useState } from 'react';
const Counter = () => {
const [counter, setCounter] = useState(0);
const increaseHandler = () => {
setCounter(prevCount => prevCount + 1);
};
const decreaseHandler = () => {
setCounter(prevCount => prevCount - 1);
};
return (
<ButtonGroup style={{ border: "1px solid gray", margin : "5px" }} size="sm">
<Button variant="secondary" onClick={decreaseHandler}> - </Button>
<Button variant="light"> {counter} </Button>
<Button variant="secondary" onClick={increaseHandler}> + </Button>
</ButtonGroup>
);
}
export default Counter;
|
App.js 파일을 만듭니다.
|
import Counter from "./Counter";
const App = () =>{
const style = {textAlign:"center", width:"300px", padding:"10px", margin:"10px"}
return (
<div style={style}>
<Counter/>
<Counter/>
<Counter/>
</div>
);
}
export default App;
|
index.js 파일을 만듭니다.
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'
const root = ReactDOM.createRoot(document.querySelector("#app"));
// 타이틀 변경
document.querySelector("title").innerText = "React Hook Example!!";
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
index.html 파일을 만듭니다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
실행 결과 입니다.
Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.
- 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 호출하면 안됩니다.
- React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
다음 부터 React Hook을 차례대로 알아 보도록 하겠습니다.
'Front End > React' 카테고리의 다른 글
| [React Exam] react-router-dom 사용해보기 1 (2) | 2024.11.19 |
|---|---|
| [React Exam 41] useState()에 대하여 알아보기 (1) | 2024.11.06 |
| [React Exam 39] 가위바위보 게임 만들기 (1) | 2024.11.05 |
| [React Exam 38] 로또 번호 자동 생성기 만들기 2 (0) | 2024.11.05 |
| [React Exam 37] 로또 번호 자동 생성기 만들기 (0) | 2024.11.04 |
