Hook
갈고리라는 뜻으로 원래 존재하는 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행하게 함
즉, 원하는 시점에 정해진 함수가 실행되도록 만든다 이때 실행되는 함수를 Hook이라고 생각하자
React(함수형 컴포넌트)를 더 편리하게 사용 가능하게 하는 도구 느낌으로 이해하면 편하다.
특징
- 앞에 use를 붙여서 Hook이 수행하는 기능에 따라 이름을 짓는다.
예를 들어 useState는 State 기능을 사용(use)하겠다 라고 생각하면 된다.
2.Hook은 무조건 최상위 레벨에서만 호출해야한다
3. React 함수 컴포넌트에서만 Hook을 호출해야한다
useState (가장 많이 쓰임)
State를 선언하고 업데이트함
즉, State를 사용하기 위한 Hook이다. State를 사용하여 값이 바뀔 때 마다 재렌더링이 되도록 한다.
예제
import React, { useState } from 'react';
const Counter = () => {
// useState 훅을 사용하여 count 상태를 선언하고 초기값을 0으로 설정
const [count, setCount] = useState(0);
// 버튼 클릭 시 호출되는 함수
const increment = () => {
setCount(count + 1); // count 값을 1 증가시킴
};
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={increment}>카운트 증가</button>
</div>
);
};
export default Counter;
-
useState(0)이라고 선언하여 맨처음 count를 렌더링하면 0이 렌더링 된다.
<button onClick={increment}>카운트 증가</button>해당 button 컴포넌트를 누르면 onClick이 작동하면서 increment 컴포넌트가 작동한다.
const increment = () => {
setCount(count + 1); // count 값을 1 증가시킴
};increment 컴포넌트를 보면 setCount(count+1) 변수가 선언되있다.
즉, count 초기값이 0인데 아래 button 컴포넌트를 누르면 +1 씩 증가하여
useState를 통해 count 값에 저장이 된다.
<button onClick={increment}>카운트 증가</button><p>현재 카운트: {count}</p>button을 누를 때 마다 count 는 1씩 증가한 상태가 재렌더링 된다.
useEffect(가장 많이 쓰임)
Side Effect를 수행하기 위한 Hook
Side Effect
서버에서 데이터를 받아오거나 수동으로 Dom을 변경하는 등의 작업을 의미
즉, 효과 또는 영향을 미치는 작업을 수행한다 라고 생각하자
간단하게 생각해서 컴포넌트가 렌더링된 후 특정 작업을 실행할 수 있게 한다.
useEffect(() => {
// 여기서 원하는 사이드 이펙트를 처리
}, [dependency1, dependency2]);구조는 [dependency1, dependency2]가 변경이 되면
{
// 여기서 원하는 사이드 이펙트를 처리
}해당 부분에서 선언한 내용이 실행된다고 생각하면 편하다.
예제
import React, { useState, useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
// useEffect로 count가 변경될 때마다 콘솔에 로그를 찍음
useEffect(() => {
console.log(`현재 카운트는 ${count}입니다.`);
}, [count]); // count가 변경될 때마다 실행됨
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>카운트 증가</button>
</div>
);
};
export default Counter;다음 부분을 살펴보자
// useEffect로 count가 변경될 때마다 콘솔에 로그를 찍음
useEffect(() => {
console.log(`현재 카운트는 ${count}입니다.`);
}, [count]); // count가 변경될 때마다 실행됨위에서 내가 말한것 처럼 [count]가 변경(렌더링)되면
console.log(`현재 카운트는 ${count}입니다.`);해당 동작이 실행된다고 생각하면 된다.
useMemo
Memorized value를 리턴하는 훅
즉, Memo 기능 처럼 결과 값을 저장했다가 다시 불러오는 기능을 한다고 생각하면 된다
Memoization
- 컴퓨터 분야에서 최적화를 위해 사용하는 개념
- 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로운 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환
Memoization 덕분에 함수 호출 결과를 받기까지 걸리는 시간도 짧아질 뿐더러 불필요한 중복 연산을 하지 않아도 된다.
주의할 점
useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행됨
따라서 렌더링이 일어나는 동안 실행되서는 안될 작업을 useMemo의 함수에 넣으면 안된다
useCallback
useMemo와 비슷한데 값이 아닌 함수를 반환한다는 차이점이 있다.
즉, 컴포넌트가 렌더링 될 때마다 매번 함수를 새로 정의하는 것이 아니라 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의해서 리턴 해주는것
useCallback을 사용하는 이유
useCallback 훅을 사용하지 않고 컴포넌트 내에 함수를 정의한다면 매번 렌더링이 일어날 때마다 함수가 새로 정의 된다.
따라서 useCallback을 사용하여 특정 변수의 값이 변한 경우에만 함수를 정의하도록 해서 불필요한 반복을 없앰
useRef
reference를 사용하기 위한 Hook
reference
특정 컴포넌트에 접근할 수 있는 객체
즉, React가 컴폰너트를 렌더한 후에도 그 요소를 직접 다룰 수 있게하는 다리라고 생각하자
reference객체에는 current라는 속성이 있는데 이것은 현재 reference하고 있는 엘리먼트를 의미한다.
예를 들어서 내가 입력 창에다가 자동으로 포커스를 주고 싶을때 useRef를 사용하여 직접 그 창에 포커스를 줄 수 있다
예제
import React, { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus(); // input 요소에 직접 포커스 설정
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleClick}>입력창에 포커스</button>
</div>
);
}- ref는 ‘입력 창’을 기억하는 역할
- inputRef.current.focus()는 그 입력 창에 직접 포커스를 주는 행동
Event
Event
사건 즉 React에서는 사용자가 버튼을 클릭한 사건과 같은 느낌으로 쓰임
Event Handler
이벤트가 발생했을때 이벤트를 처리하는 행위
argument
함수에 주장할 내용 즉 함수(이벤트 헨들러)에 전달할 데이터
파라미터(매개변수)
함수나 매서드를 호출할 떄 전달하는 입력 값
예제
import React from 'react';
const MyButton = () => {
const handleClick = () => {
alert('Button clicked!');
};
return (
<button onClick={handleClick}>Click Me!</button>
);
};
export default MyButton;Camel Case(카멜 케이스)
여러 단어로 된 이름을 하나로 합칠 때 사용하는 표기법으로 낙타 모양 같다고 지어진 이름이다
카멜 케이스 예
onClick, handleSubmit, onMouseEnter
카멜 케이스가 아닌 경우
onclick, handle_submit, on_mouse_enter
React에서 카멜 케이스를 사용하는 이유
React는 JavaScript 기반의 프레임워크이기 때문에,
표준 JavaScript 스타일을 따른다.
JavaScript에서는 변수, 함수 이름을 정의할 때 카멜 케이스가 권장된다.
따라서 React에서도 일관성을 유지하기 위해 이벤트 핸들러 이름이나 속성을 카멜 케이스로 작성한다.
카멜 케이스의 규칙
1. 첫 단어는 소문자로 시작한다.
2. 이후 단어들은 첫 글자를 대문자로 쓴다.
3. 단어 사이에 띄어쓰기를 넣지 않는다.Form
Form
Form 은 사용자로부터 입력을 받기 위해 사용
-> 다음 사진은 클래스형 컴포넌트 기준이고 함수형 컴포넌트는 useState를 통해 state 관리
Form 사용법
value라는 attribute를 통해서 값을 전달하고 값을 변경할 때는 onChange 함수안의 함수를 사용하여 값을 업데이트함
attribute
HTML 요소가 가지고 있는 추가적인 정보나 설정을 나타내는 것
즉, 속성
Form 태그 종류
-
input
사용자로부터 데이터를 입력받기 위해 사용되는 입력 필드를 생성하는 html 태그 -
textarea
여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 html 태그 -
select
drop-down목록(여러개의 옵션 중에서 하나를 선택할 수 있는 기능)을 보여주기 위한 html 태그
