코딩이야기/React 공부7 [React] React-Hooks 간단 정리 (2) 대표적인 최적화 React-Hooks리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법memo(React.memo) : 컴포넌트를 메모이제이션(memoization)useCallback : 함수를 메모이제이션(memoization)useMemo : 함수가 리턴하는 값을 메모이제이션(memoization) •React.memo 부모가 리렌더링 되면 자식은 모두 리렌더링 됩니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484.. 2024. 7. 3. [React] React-Hooks 간단 정리 (1) 대표적인 React-Hooks• useState12345678910111213141516171819202122232425// 기존에 우리가 사용하던 일반 방식setState(number + 1); // 함수형 업데이트 setState((currentNumber)=>{ return currentNumber + 1 }); **차이점 button onClick={() => { setNumber(number + 1); // 첫번째 줄 setNumber(number + 1); // 두번쨰 줄 setNumber(number + 1); // 세번째 줄 }} />// 코드가 3개를 써놔도 1번만 실행되어서 1만 증가 button .. 2024. 7. 3. [React] React에서 SVG 쓰는 방법 기존에 쓰고 있던 png, jpeg 등의 파일에 비해 svg 파일은 생소하기도 하고 다루기 까다롭다고 느껴서 쓰지 않고 있었는데 최적화를 진행중 이미지가 너무 커서 어떻게 할까 생각을 하다 svg를 사용하기로 했습니다. -SVG란 'Scalable Vector Graphics' 의 약어로 각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식입니다. -XML이란? HTML과 같은 마크업 언어이고 HTML이 브라우저가 분석할 수 있는 태그로 기술되어있는 문서라면, XML은 웹페이지에서 데이터를 주고받기(통신하기) 위한 태그들로 기술된 문서입니다. png, jpeg와 svg의 차이점 1. png, jpeg는 비트맵 기반의 이미지라서 원래의 크기보다 크게 보여지게 될 경우 이미지가 깨진.. 2023. 10. 31. [React기초] 리액트 Routing & SPA & CSR html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말합니다.공식문서Routing이란? -어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 -ROUTER = 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 -ROUTE + ING = 경로를 정해주는 행위 자체, 그런 과정들을 다 포함하여 일컫는 말 -요청받은 내용을 브라우저 화면에 표시하는것 PAGE ROUTING이란? -웹서버가 요청이 명시되있는 경로에 따라 알맞은 페이지를 선택하고 페이지를 반환하여 사용자가 페이지에 접속하는 과정 자체 여러개의 페이지를 가진 어플리케이션 => MultiPage Application (MPA)라고 부른다 .. 2023. 6. 21. 이전 1 2 다음
