3.3 리액트 훅 기초 익히기
- 함수형 컴포넌트에 기능을 추가할 때 사용한다.
- 상태값을 사용할 수 있고, 자식 요소에 접근할 수 있다.
- 훅이 주는 장점이 되게 다양하고 적극적으로 개발 진행중이라고 한다.
3.3.1 상태값 추가하기 : useState
- useState를 사용하면 배열을 반환해주고 배열의 첫 번쨰 원소는 상태값, 두 번째 원소는 상태값 변경 함수다.
- 상태값 변경함수가 호출 될 경우 해당 컴포넌트를 다시 렌더링하고 자식도 같이 렌더링 된다.
- 상태값 변경 함수는 비동기 동작을 진행하며 배치처리를 진행하여 한번에 처리한다.
function MyComponent() {
const [count, setCount] = useState({ value : 0});
function onClick() {
setCount({value : count.value + 1});
setCount({value : count.value + 1});
}
console.log("render called");
return (
<div>
<h2>{count.value}</h2>
<button onClick={onClick}>증가</button>
</div>
);
}
- 이 코드를 보면 value 값이 2가 증가되어야 할 것 같지만 실제로는 1만 증가하게 된다.
- 효율적 렌더링을 하기 위해 여러 상태값을 요청을 배치처리 하기때문이다.
- 즉 일정 시간동안 변화한 상태값들을 모아서 한번에 처리한다.
- 만약 값을 2 증가시키고 싶을 경우 함수를 사용하면 해결할 수 있다.
function onClick() {
setCount(prev => prev + 1);
setCount(prev => prev + 1);
}
- 함수의 경우 비동기 처리가 되지만 순서가 보장되기 때문에 처음 시행된 setCount의 변경값이 두번째로 실행되는 값으로 들어가게 된다.
- 같은 상태값변경 함수를 사용할 경우 함수를 이용하면 배치처리에서도 순서를 부여할 수 있다.
- 다른 상태값변경 함수를 사용할 경우 상태값 변경함수는 순서대로 처리된다.
- useState는 클래스형 컴포넌트 setState와는 다르게 동작하며 setState 메서드는 기존 상태값과 새로 입력된 값을 병합하지만 useState는 이전의 상태값을 덮어씌운다. (...state를 사용하면 이전 상태값을 가져올 수 있음)
- 리액트 외부에서 등록된 이벤트 함수는 상태값 변경 함수를 호출하면 배치로 처리되지 않는다.
3.3.2 컴포넌트에서 부수 효과 처리하기 : useEffect
- 함수 외부 상태를 변경하는 연산을 부수 효과라고 부른다.
- 부수효과 함수는 렌더링 결과가 실제 돔에 반영된 후 호출된다.
- useEffect(진행할 내용, 의존성 배열) 로 구성되며 의존성 배열의 변화에 따라 진행할 내용을 적용시킨다.
3.3.3 훅 직접 만들기
- 훅들을 사용하여 커스텀 훅을 만들 수 있다.
- 커스텀 훅을 사용하면 쉽게 로직을 재사용 할 수 있고 프로젝트 진행에있어서 도움이 많이된다.
- 마운트 : 컴포넌트의 첫 번째 렌더링 결과가 실제 돔에 반영된 상태를 의미한다.
3.3.4 훅 사용 시 지켜야 할 규칙
- 규칙 1 : 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.
if (value === 0) {
const [v1, setV1] = useState(0);
}
else {
const [v1, setV1] = useState(0);
const [v2, setV2] = useState(0);
}
- 조건식 내부에 훅을 넣을 경우 조건에 따라 훅이 호출되는 순서가 바뀌게 되므로 안된다.
for (let i = 0; i < value; i++) {
const [num, setNum] = useState(0);
}
- 루프 안에서 훅을 호출하는 경우도 순서가 보장되지 않는다.
function func1() {
const [num,setNum] = useState(0);
}
- 함수가 언제 호출될지 모르기 때문에 순서가 보장되지 않는다.
- 규칙 2 : 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.