Today Hailie Learned

렌더링 최적화를 위한 Hook, useMemo, useCallback useMemo란? 특정 값을 재사용하고자 할 때 사용하는 Hook이다. 예시 코드 해석 👉 props로 넘어온 value값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출력을 하고 있다. function Calculator({value}){ const result = calculate(value); return {result} ; } 만약 위의 calculate가 내부적으로 복잡한 연산을 해야 하는 함수라 계산된 값을 반환하는 데에 시간이 몇 초 이상 걸린다고 가정한다면, 해당 컴포넌트는 렌더링을 할 때마다 이 함수를 계속해서 호출할 것이고, 그 때마다 시간이 몇 초 이상 소요가 될 것이다. 유..

리액트에는 virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이 가상의 DOM 객체는 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전, 후를 비교하고 바뀐 부분만 적용할 수 있다. ???? (진짜) DOM이란? Document Object Model = 브라우저가 트리 구조로 만든 객체 모델이다. JS 같은 스크립팅 언어가 태그들에 접급해서 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것이다. DOM이 애플리케이션의 UI 상태가 변경될 때마다 해당 변경 사항을 나타내기 위해 업데이트가 되면 성능에 영향을 미치게 되고, DOM의 조작 속도가 느려진다. DOM이 변경되고 업데이트가 된다는 것은 브라우저의 렌더..

리액트 훅이란? 단순히 use로 시작하는 모든 함수이다. 인쇄해서 벽에 붙여두기 2가지 메인 규칙 + 추가1 규칙 1. 리액트 훅은 리액트 컴포넌트 함수, 커스텀 훅 함수에서만 호출해야 한다. 규칙 2. 리액트 훅은 리액트 컴포넌트 함수 또는 커스텀 훅 함수의 최상위 수준에서만 호출해야 한다. (중첩함수에서, block문에서 호출 x) ex) if 문 안에서, useEffect 안에서 호출 금지 추가 규칙 3. useEffect 훅은 항상 참조하는 모든 항목을 의존성으로 useEffect 내부에 추가해야 한다. ** useReducer 또는 useState에 의해 노출된 state 업데이트 함수는 변경되지 않도록 리액트가 보장한다. 그래서 의존성으로 넣을 필요 없다. 정리 => 브라우저에서 오지 않거나,..

리액트 Context란? 리액트 내부 state 저장소를 이용해서 부모를 통해 데이터를 전달하지 않으면서 저장소에서 액션을 트리거해서 관련된 컴포넌트에 직접 전달 할 수 있다. props로 모든 데이터를 자식에게 넘겨주기에는 너무 복잡할 것 같을 때 쓴다. 1. components 파일 안에 store라는 폴더를 만들고 아래 함수를 써주고 꼭 export 해주기 //전역 state에 대해 여러 개의 컨텍스트를 가질 수 있다. 물론 한개도 가능 import react from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 2. 공급하기 = 컨텍스트를 활용할 수 있어야 하는..

✔️ useState & useReducer를 언제 쓸지 알아보자 (정확하게 정해진 규칙은 없음) useState는 주요 state 관리 도구이다. 개별 state 및 데이터를 다루기에 적합하다. state 업데이트가 쉽고, 몇 종류 안되는 경우에 적합하다. 정리 => state가 변경되는 경우가 다양하지 않다면, 특히 state로서의 객체나 그 비슷한 게 없다면 useState 사용 useReducer는 state로서의 객체가 있는 경우, 또는 복잡한 state가 있을때 적합하다. 연관된 state 조각들로 구성된 state 관련 데이터를 다루는 경우에 적합하다. 정리 => 관련 state 스냅샷들이 서로 독립적이고 업데이트가 같이 잘 안된다면 useReducer 사용 ⭐️ useReducer를 사용하..

번들링이란? 프론트엔드 개발에서 번들링은 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정이다. => 사용자에게 배포하기 위해 번들링이 꼭 필요하다. Webpack 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러*이고, 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. * 모듈 번들러는 HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구이다. Webpack에서의 모듈은 JS의 모듈에만 국한하지 않고, HTML, CSS, .jpg, .png 같은 이미지 파일도 전부 포함한 포괄적인 개념이다. Webpack은 주요 구성 요소인 로더(loader)를 ..

useReducer state 관리를 도와준다. 더 복잡한 state에 특히 유용하다. 여러 state가 함께 속해 있는 경우 여러 state가 같이 바뀌거나 서로 관련된 경우 👇 useState나 거기에서 얻은 state는 사용하거나 관리가 어려워지거나 오류가 발생하기 쉽다. 👇 이런 경우 useState 대신 useReducer를 쓸 수 있다. useReducer는 더 강력한 state 관리가 필요할 때 쓴다. (그렇다고 항상 사용은 x) useReducer를 사용하는 것이 항상 좋을때 다른 state를 기반으로 하는 state를 업데이트하면 하나의 state로 병합하는 것도 좋다. useReducer 의 구조 const [state, dispatchFn] = useReducer(reducerFn, ..

클린업 작업이 필요한 effect useEffect(() => { setFormIsValid( enteredEmail.includes("@") && enteredPassword.trim().length > 6 ); }, [enteredEmail, enteredPassword]); setFormIsValid()함수는 enteredEmail, enteredPassword가 변경될 때마다 state가 업데이트된다. ==>> 좋지 않다!! 함수 컴포넌트 실행이 트리거되서 리액트는 DOM에서 무언가를 변경하는 게 필요한 지 여부를 확인해야 한다. 그래서 enteredEmail, enteredPassword가 변경될 때마다 여부확인은 불필요하다. 내가 하고 싶은 것 1. 일정량의 키 입력을 수집하는 것. 2. 키 ..

모든 컴포넌트 재평가 후에 특정 의존성이 변경되는 경우 => 의존성 배열에 의존성으로 추가하면 된다. 기존 코드 const Login = (props) => { const [enteredEmail, setEnteredEmail] = useState(""); const [emailIsValid, setEmailIsValid] = useState(); const [enteredPassword, setEnteredPassword] = useState(""); const [passwordIsValid, setPasswordIsValid] = useState(); const [formIsValid, setFormIsValid] = useState(false); const emailChangeHandler = (e..

사이드 이펙트 = 이펙트 Side Effect 리액트의 주요 임무 UI를 렌더링 하는 것. 사용자 입력에 반응하여 필요할 때 UI를 다시 렌더링 하는 것이다. 사용자 입력에 따른 반응 화면에 보이게 하기 그렇다면 리액트의 사이드 이팩트는?? 주요 임무 외의 모든것! ex) http 리퀘스트를 보내는 것 or 브라우저 저장소에 무언가를 저장하는 것 or 타이머 간격 조정하는 것 사이드 이펙트는 직접적으로 컴포넌트 함수에 들어가서는 안된다. 그 이유는 버그나 무한 루프가 발생할 가능성이 높기 때문이다. 또는 http 리퀘스트가 너무 많이 보내질 수도 있다. 그래서 사이드 이팩트를 핸들링하는 훅을 사용하는 것이다. 그게 바로 useEffect이다. useEffect(()=> {}, [dependencies])..