dev_H dev_H

SSR, CSR, SSG SSR, CSR, SSG, 모두 다 웹페이지가 렌더링하는 방식들임 크게 CSR(Client Side Rendering)과 SSR(Server Side Rendering)으로 나뉨. 이외에도 SSG와 ISR라는 방법도 있음 이걸 얘기하기 전에 연관되는 개념으로 SPA와 MPA에 알아야 함 SPA, MPA SPA(single page application) 한 개의 페이지로 구성된 어플리케이션 웹 어플리케이션에 필요한 모든 정적 리소스(HTML, CSS, Javascript 등)을 최초 렌더링 시 한 번에 다운로드 함. 그 후 새로운 요청이 있을 때 서버에 필요한 데이터만 요청해 받아서 페이지를 갱신함 결국 SPA를 CSR 방식으로 렌더링한다고 할 수 있음(하지만 SPA가 전부 CS..

useCallback, useMemo, React.memo useCallBack, useMemo, React.memo 차이점 세 개 다 메모이제이션을 통해 불필요한 렌더링이 발생하지 않게 최적화할 수 있게 만들어주는 훅임 그러면 메모이제이션은 무엇을 뜻할까? 메모이제이션 기존에 수행한 연산의 결과 값을 메모리에 저장해두었다가 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 의미함 따라서 이 훅들을 적절하게 사용하면 중복된 연산을 피할 수 있기 때문에 성능 최적화에 도움을 줄 수 있지만 너무 많이 사용하면 메모리에 부담을 줌 useCallback : 함수를 캐싱 useMemo : 값 자체를 캐싱 React.memo : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링될 때 자식컴포넌트는 리렌더링 됨 그런데 만약..

useRef, useEffect useRef useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. 공식 홈페이지의 설명에 따르면 .current 속성이 전달된 인수로(initialValue) 초기화되는 변경 가능한 ref 객체를 반환하고, 반환된 객체는 컴포넌트의 전체 수명동안 유지된다고 함 이를 풀어서 설명하면 아래와 같음 useRef는 변경 가능한 객체를 반환함 반환 객체는 useRef 인자를 current라는 속성 안에 저..

React useState useState란? const [count, setCount] = useState(0) 공홈의 정의 : 렌더링 사이에 데이터를 유지하기 위한 state 변수 + state 변수를 업데이트하고 리액트가 다시 컴포넌트를 리렌더링하게 하는 setState로 이루어진 상태관리 훅 좀 더 축약한 정의 : 데이터를 저장하고 유지할 수 있는 state를 가지고 setState를 통해 state의 상태를 관리하는 상태관리 hook setState는 기존의 state를 복사해 새롭게 state를 갱신 -> 객체의 불변성을 지킬 수 있음 -> 오류들을 미리 방지할 수 있음. setState를 통해 state에 변화가 생기면 알아서 리렌더링을 해주기 때문에 훨신 쉽게 상태관리를 할 수 있음 sta..