SOOM_BLOG [숨숨 블로그]

useState() useReducer() 주된 상태 관리 툴 이다. 더 강력한 상태관리 툴이 필요할 때 적합하다. 독립된 상태/데이터 조각에 적합하다. 처리할 데이터가 state의 부분들로 이루어진 state데이터 인 경우 사용하기 적합하다. 상태 업데이트가 쉽고 몇 가지 종류의 업데이트로 제한되는 경우에 사용하기 좋다. 더 복잡한 상태 업데이트 로직을 수행하고 싶을 때 유용하다. 참고자료 : udemy react 강의

clean up 함수 예제를 보기 전 디바운싱(Debouncing)에 대해 먼저 알아보자. Debouncing 이란? '연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식' 이다. onChange이벤트를 통해 입력값에 대한 유효성 검사를 하다보면 입력값의 상태를 입력할 때 마다 상태 변경하는 경우가 생긴다. 상태가 변경될 때마다 화면이 재렌더 되거나, 처리로직을 재수행 하는 경우 과부화가 생길 수 있음...! 따라서 각 항목 별 로 이벤트를 관리하지 말고 디바운싱을 하여, 그룹단위로 이벤트를 처리해보자..! 예제) 로그인 시, id/pw입력값에 대한 유효성 검사. [디바운싱 전] const [enteredEmail, setEnteredEmail] = useState(''); //이메일(아이디) ..

Effect (= Side Effect) 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 (ex. APP내에서 고려되는 모든 사항들 : 브라우저 저장소에 저장된 데이터를 백엔드 서버에 HTTP 요청 보내기, 타이머 설정 및 관리 등) ➡️ 이러한 작업은 특히 렌더링을 차단/지연할 수 있으므로 일반적인 컴포넌트 평가 및 렌더링 주기 외부에서 발생해야 한다. React에서는 Side-Effect 처리를 위해 useEffect()함수를 제공 useEffect() hook useEffect(() => {...}, [dependencies]) 첫번째 인수 : 지정된 종속성이 변경된 경우, 모든 구성 요소 평가 후에 실행해야 하는 함수 두번째 인수 : 이 effcet의 종속성(배열) - ..

기본 역할은 다른 DOM요소로 접근해서 작업할 수 있게 해주는 역할이다. 선언한 useRef 변수를 HTML요소의 ref prop을 통해 연결할 수 있으며, uesRef 변수로 연결한 HTML요소에 접근할 수 있다. uesRef 변수는 항상 current 속성을 가지고 있는 객체를 반환한다. 💡 ref 를 사용해보자 useRef hook을 사용하기 위해 import해주자. (함수형 컴포넌트에서만 사용 가능) import React, { useRef } from "react"; useRef 변수를 선언하자. const nameInputRef = useRef() const ageInputRef = useRef() 선언한 useRef 변수를 HTML요소와 연결하자. Age (Years) key prop과 마찬..

제어 컴포넌트 React에 의해 값이 제어되는 입력 폼 엘리먼트. (react와 상태가 연결되어 있는지 확인!) const ControlComponent = (props) => { const [enteredUserNm, setEnteredUserNm] = useState(""); const [enteredUserAge, setEnteredUserAge] = useState(""); .... const onChngNameHandler = (e) => { setEnteredUserNm(e.target.value); }; const onChngAgeHandler = (e) => { setEnteredUserAge(e.target.value); }; return ( ) } 비제어 컴포넌트 ref를 사용하여 DO..

둘 이상의 'root' JSX 요소를 반환할 수 없다. (변수에 둘 이상의 'root' JSX 요소를 저장할 수도 없다) 하나의 요소만 가질 수 있다. 물론 children은 더 가질 수 있다. 왜 하나의 요소만 저장하거나 리턴할 수 있을까? 자바스크립트에서는 하나 이상 리턴할 수 없기 때문!! return ( Hi there! This does not work :-( ) ⬇️⬇️⬇️ return ( React.createElement('h2', {}, 'Hi there!') React.createElement('p', {}, 'This does not work :-(') ) 💡 여러 요소를 리턴 하고 싶은 경우엔 어떻게 할까? 1) 하나의 배열 값으로 리턴하자. (요소 마다 key 지정 필요.) ret..