온라인 강의(유데미, 인프런 등) (43) 썸네일형 리스트형 [react] useReducer(feat. useState와 비교) useReducer React(리액트)에서는 useReducer란 훅(Hook)을 제공하는데, 이 reducer(리듀서)로 상태 관리(state management)를 할 수 있다. useState와 비슷하지만 가령 두 개의 상태가 컴바인 되어 관리되어야 할 경우 같은(아이디 상태 값, 아이디 유효성 검사 통과 여부 상태 값) 조금 더 복잡한 상태 관리가 필요할 때 사용할 수 있다. useReducer 문법은 간단하다. reducer(리듀서) 함수와 initialState(초기 상태)를 전달하면 useReducer라는 훅(Hook)이 새로운 상태(state)와 dispatch(디스패치)함수를 리턴해준다. const [state, dispatchFn] = useReducer(reducerFn, initia.. [react] useEffect에서 Clean-up 함수 사용하기 Debouncing : 연이어 발생한 이벤트를 하나로 묶어 처리하는 방식 onChange 이벤트를 통해 입력값에 대한 유효성 검사를 하다 보면 값을 입력할 때마다 상태를 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 리렌더링 되거나, 처리 로직을 재수행 하는 경우 과부하가 생길 수 있으므로 디바운싱을 통해 그룹 단위로 이벤트를 처리해보자. 아래는 로그인 시 id/pw입력 값 유효성 검사 로직이다. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) 입력값 저장 const [emailIsValid, setEmailIsValid] = useState(); //패스워드 입력값 저장 const [formIsValid, set.. [react] 제어 컴포넌트 vs 비제어 컴포넌트 제어 컴포넌트와 비제어 컴포넌트의 개념 및 차이, 어떤 상황에서 사용해야 하는지에 대해 간략하게 정리해 보자. 제어 컴포넌트 아래의 코드는 input 태그의 value가 바뀔 때마다 onChange 함수를 통해 state가 업데이트되는 로직이다. export default function App() { const [name, setName] = useState(""); const onChange = (e) => { setName(e.target.value); }; return ( ); } 제어 컴포넌트 방식은 사용자의 입력을 기반으로 state를 관리하는 방식을 말한다. setState 함수를 사용하여 값을 관리하는 방식(React에 의해 값이 제어되는 방식)을 제어 컴포넌트 방식이라고 생각하면 편하다... 이전 1 ··· 3 4 5 6 다음
