지영이의 개발 블로그

1. 하나의 상태만을 위한 상태 렌더링 만약 상태가 true일때만 무언가를 렌더하고 false일땐 아무것도 렌더링 하고싶지 않을 때, 삼항연산자 보단 && 연산자(논리 and 연산자)를 사용하세요. 👎나쁜예 function App() { return ( {showConditionalText ? The condition must be true! : null} // 삼항연산자를 사용하면 null 같이 불필요한 코드가 늘어납니다. ) } 👍 좋은예 function App() { return ( {showConditionalText && The condition must be true!} // 삼항연산자를 활용하면 조건별 렌더링을 더 가시적으로 표현할 수 있습니다. ) } 2. 두 상태에서의 각기 다른 렌더링 ..

✔useReducer란? 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해는데, useReducer는 usestate 처럼 state를 생성하고 관리 할수 있게 해주는 도구입니다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있습니다. '분리시키는 것을 가능하게 해준다'는 것은, State 업데이트 로직을 또다른 파일에 작성해서 (분리), 분리된 파일을 불러와서 사용하는 것도 가능하다는 뜻도 된다. · useState를 사용한 경우 : 컴포넌트 내부에 State 업데이트 로직이 존재 · useReducer를 사용한 경..

컴포넌트를 만들다보면 반복되는 로직이 자주 발생한다. 커스텀훅을 사용하면 코드와 로직의 반복을 최소화 하고 재사용을 높힐 수 있다 즉 중복되는 로직을 하나의 로직으로 묶어 어느곳 에서든 쉽게 import 하여 사용할 수 있게 해준다. 내 프로젝트에 커스텀훅을 적용해 보고자 한다. 이처럼 두개의 컴포넌트는 비슷한 코드(input)가 반복이 되고있다. useInputs hooks을 만들어준다. import { useState, useCallback } from 'react'; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); const onChange = useCallback(e => { const { name, ..

✔DOM DOM(Document Object Model)은 MDN에 따르면 HTML, XML 문서의 프로그래밍 interface라고 한다. 쉽게 이해하면, 웹 페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이다. 수많은 Document의 elements를 가진 서비스들이 계속해서 데이터가 실제 DOM에 직접적으로 접근하여 업데이트 된다면 이는 분명 무리가 될 것이라고 판단이 된다. 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다. 즉 DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고,..

✔DOM DOM(Document Object Model)은 MDN에 따르면 HTML, XML 문서의 프로그래밍 interface라고 한다. 쉽게 이해하면, 웹 페이지를 이루는 요소들(태그 등)을 자바스크립트가 이용을 할 수 있게 브라우저 내에서 트리 구조로 만든 객체 모델이다. 수많은 Document의 elements를 가진 서비스들이 계속해서 데이터가 실제 DOM에 직접적으로 접근하여 업데이트 된다면 이는 분명 무리가 될 것이라고 판단이 된다. 웹브라우저 단에서 DOM 변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉 렌더링이 일어 나는 이 과정에서 시간이 허비되는 것입니다. 즉 DOM을 반복적으로 직접 조작하면 그 만큼 브라우저가 렌더링을 자주하게 되고,..

1. 컴포넌트 자체를 숨기려면 null을 return 하자 아무것도 출력해 주고 싶지 않을때 return만 반환해주면 return undefined과 똑같다 이때 return null을 반환해주면 아무것도 렌더링 해 주지않는다. 2.setState는 비동기로 동작한다. import { useState } from 'react'; function App() { const [count, setCount] = useState(0); const handleIncrement = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return ( {`count is ${count}`} + ); } export default App; 버..

컴포넌트라는 함수가 렌더링이 될 때마다 변수가 다시 초기화가 되게 되므로 "새로 만들어진 함수 객체의 주소 값을 다시 할당받게 되어진다". 이러한 불필요한 초기화 또는 렌더링을 막아주기 위해 아래와 같은 React hooks를 이용하여 더 성능을 최적화 시켜줄 수 있다. ✔ useMemo 만약 컴포넌트 내에 어떤 함수가 값을 리턴하는데 많은 시간을 소요한다면, 이 컴포넌트가 리렌더링 될 때마다 함수가 호출되면서 많은 시간을 소요하게 될 것이고, 그 함수가 반환하는 값을 하위 컴포넌트가 사용한다면 그 하위 컴포넌트는 매 함수호출마다 새로운 값을 받아 리렌더링할 것이다. 이와 같은 문제는 useMemo를 통해 함수가 하위 컴포넌트를 최적화 함으로써 해결할 수 있다. useMemo를 사용해서 momoizati..

DB 없이 state 데이터를 저장 하고 싶으면 서버로 보내서 DB에 저장 브라우저 임시 저장공간 사용 (localStrorage) 저는 localStorage를 사용해 데이터를 저장하여 최근 본 상품 UI를 만들어 볼것입니다 let [watchItem, setWatch] = useState([]); useEffect(() => { let watch = localStorage.getItem("watched"); if (watch == null) { watch = []; } else { watch = JSON.parse(watch); watch.push(id); } if (watch.length >= 3) { watch = new Set(watch); watch = [...watch]; } localSto..