반응형 Frontend, Client/React3 [React] 재렌더링 최적화 1. 재렌더링이 발생하는 경우컴포넌트의 state 업데이트컴포넌트의 props 변경재렌더링된 컴포넌트의 모든 하위 컴포넌트 2. 재렌더링 최적화 - 컴포넌트 메모이제이션메모이제이션: 이전 처리 결과를 저장해둠으로써 처리 속도 향상 및 불필요한 처리 실행xconst Component = memo(()=>{});위와 같이 함수를 memo로 감싸주면 해당 컴포넌트는 props에 변경이 있을때만 재렌더링된다. 3. 재렌더링 최적화 - 함수 메모이제이션근데 props로 함수를 넘겨주는 경우에는 코드가 실행될 때마다 함수가 항상 새롭게 생성되기 때문에 이를 props가 변했다고 간주하여 재렌더링이 된다. 이때는 함수를 메모이제이션 해주어야 재렌더링이 발생하지 않는다.함수의 메모이제이션은 useCallback을 사용.. 2024. 7. 20. [React] 다양한 CSS 적용 방법 1. Inline Styles기본적인 방법이지만, 앱이 복잡해질수록 사용하기 어려움// 방식 1: 직접 기술return ( )// 방식 2: 사전 정의const containerStyle = { width: "100%", padding: "16px",};return ( ) 2. CSS Modules.css 또는 .scss 파일을 정의하는 방법*.scss 파일 작성을 위해선(npm install node-sass)가 필요scss 파일 작성.container { border: solid 1px #aaa; border-radius: 20px; padding: 8px; margin: 8px;}사용import classes from "./CssModules.module.scss"; // 임의의 이름 지정 가능ex.. 2024. 7. 20. [React] 리액트 기본 개념 1. JSX 표기법함수의 반환값으로 HTML 태그 사용, 그것을 컴포넌트화하여 화면을 구성반환값은 무조건 하나의 태그로 감싸져있어야함여러 줄일 때는 괄호()를 활용import ReactDOM from "react-dom";const App = () =>{ return 안녕하세요!;}ReactDOM.render(, document.getElementById("root"));컴포넌트화 예시src 하위에 App.js 파일 작성export const App = () => { return 안녕하세요!;} 임포트하여 사용import { App } from "./App"; 2. Props함수에 넘겨주는 인자와 같은 역할을 한다.export const ColoredMsg = (props) => { const conte.. 2024. 7. 20. 이전 1 다음 반응형