useState 함수의 파라미터에는 상태의 기본값을 넣어줌 => 이 함수가 호출되면 배열을 반환함 첫번째 값은 원소의 상태 값 두번째 원소는 상태를 설정하는 함수 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨
const Counter = () => {
const [value, setValue] = useState(0); // 두번째 값으로 호출
return (
<div>
<p>
현재 카운터 값은 <b>{value}</b>입니다.
</p>
<button onClick={() => setValue(value + 1)}> +1 </button> {/*여기서 호출 됨*/}
<button onClick={() => setValue(value - 1)}> -1 </button>
</div>
);
};
하나의 useState 함수는 하나의 상태값만 관리 가능
즉 여러개를 관리하고 싶다면 여러개를 사용하면 됨
예시코드
const Info = () => {
const [name, setName] = useState('');
const [nickName, setNickName] = useState('');
const onChangeName = e => {
setName(e.target.value);
}
const onChangeNickName = e => {
setNickName(e.target.value);
}
return (
<div>
<div>
<input value={name} onChange={onChangeName} />
<input value={nickName} onChange={onChangeNickName} />
</div>
<div>
<div>
<b>이름:</b> {name}
</div>
</div>
<div>
<div>
<b>닉네임:</b> {nickName}
</div>
</div>
</div>
);
};
예시코드
useEffect(() => {
console.log('렌더링 완료');
console.log({
name,
nickName
});
});
마운트 될 때만 useEffect를 실행하고 싶을 때
useEffect(() => {
console.log('마운트 될 때만 실행');
}, []);
// 이런식으로 빈배열을 넣어주면 됨
// 배열에 [name] 이렇게 넣어주면 해당값만 출력함
이런식으로 빈배열을 넣어주면 됨
배열의 파라미터에 무엇을 넣냐에 따라 달라짐
***주의사항 리듀서함수에서 새로운 값을 만들 떄는 반드시 불변성을 지켜야함
function reducer(state, action) {
switch(action.type) {
case 'INCREMENT':
return { value : state.value + 1 };
case 'DECREMENT':
return { value : state.value - 1 };
default:
return state;
}
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, {value: 0});
return (
<div>
<p>
현재 카운터 값은 <b>{state.value}</b>입니다.
</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}> +1 </button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}> -1 </button>
</div>
);
};
useReducer 첫번째 파라미퍼에는 리듀서 함수를 넣고 두번째 파라미터에는 기본값을 넣어줌 Hook을 사용하면 state값과 dispatch 함수를 받아옴. dispatch는 액션을 발생시키는 함수 dispatch(action) 과 같은 형태
컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것
import React, { useState,useMemo } from 'react';
const avg = useMemo(() => getAverage(list), [list]);
return (
<div>
<input value={number} onChange={onChange} />
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
<div>
<b>평균값:</b> {avg} // 이렇게 작성하면 배열이 바뀔때만 호출됨
</div>
</div>
);
useCallback은 useMemo와 비슷한 함수임.
렌더링을 최적화해야하는 상황에서 사용함 Hook을 사용하면 만들어 놨던 함수를 재사용할 수 있음
사용법 첫번째 파라미터에는 생성하고 싶은 함수를 넣고, 두번째 파라미터에는 배열을 넣으면 됨. 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야하는지 명시해야함
useRef를 사용하여 ref 값을 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킴