React (34) 썸네일형 리스트형 [React] memo useMemo useCallback 차이와 사용 판단법 React에서 제공하는 주요 성능 최적화 Hook들의 특징과 사용법을 알아봅니다. memo컴포넌트 자체를 메모이제이션하여 불필요한 리렌더링을 방지합니다. 컴포넌트가 리렌더링할 때 React는 이것의 모든 자식을 재귀적으로 재렌더링합니다.부모 컴포넌트가 정상적으로 다시 리랜더링 된 후, 자신의 리랜더링 차례가 됬을 때,리랜더링 전후 props를 비교하여 동일하면 (배열이거나 객체이면 얕은 비교만 수행합니다) 리랜더링을 하지 않습니다. 기본 문법const MyComponent = React.memo(function MyComponent(props) { // 컴포넌트 로직});사용 예시import React from 'react';const Counter = ({ count }) => { return {c.. [React] Vue 개발자가 본 useEffect useEffect 는 Vue 의 watch / watchEffect , onMounted, onUpdated, onUnmounted 를 를 결합한 것과 유사한 기능을 제공합니다. 1. vue 와의 비교 // React import { useEffect } from 'react' useEffect(() => { console.log('컴포넌트가 마운트되었습니다') return () => { console.log('컴포넌트가 언마운트됩니다') } }, []) // 빈 배열은 마운트와 언마운트 시에만 실행 useEffect(() => { console.log('데이터가 변경되었습니다') }, [someData]) // 마운트 된 이후 ,.. [React] React와 Vue(Composition API)의 ref 차이점 1. 기본 개념 React: useRef와 useState를 별도로 사용 Vue: ref가 참조와 상태 관리를 모두 처리 2. 사용법 React import { useRef, useState, useEffect } from 'react'; function MyComponent() { const inputRef = useRef(null); const [count, setCount] = useState(0); useEffect(() => { inputRef.current?.focus(); }, []); return ( Count: {count} setCount(count + 1)}>Increme.. [React] state Vs ref React 에서의 state 와 ref 의 차이는 아래와 같습니다. 1) const [count, setCount] = useState(0);// 읽기console.log(count);// 쓰기setCount(count + 1); 2) useState를 통한 상태 업데이트는 비동기적으로 처리된다는 뜻은 아래와 같습니다React는 성능 최적화를 위해 여러 상태 업데이트를 배치(batch)로 처리합니다.이로 인해 상태 업데이트가 즉시 반영되지 않을 수 있습니다.연속된 여러 업데이트는 하나의 리렌더링으로 통합될 수 있습니다.function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(cou.. [React] styled-components 에서 $ 를 사용하는 이유 styled-components 라이브러리에서 $ 기호는 "트랜지언트 프롭(transient prop)"을 나타냅니다. transient prop 의 역할: 이 prop 은 스타일링에만 사용되고 실제 DOM 요소로 전달되지 않습니다.$ 마크가 없으면 DOM에 알 수 없는 속성이 전달된다는 경고가 발생합니다.const Lable = styled.label` color: ${({$invalid})=> $invalid ? '#f87171' : '#6b7280'};`// 사용 예Email [React] 동적 컴포넌트 적용하기 ( 동적으로 태그 및 컴포넌트를 자식에 적용 ) 자식 컴포넌트에서 사용할 태그 혹은 컴포넌트가기본 HTML 태그일 때는 buttonContainer='문자열 태그명' 으로 속성 값을 주고사용자 정의 컴포넌트를 넘겨줄 때는(예를 들어 Menu 라는 컴포넌트가 있다면) buttonContainer={ Menu }로 자식 컴포넌트에 전달하면 됩니다 부모 컴포넌트1 {tabContent} 자식 컴포넌트2export default function Tabs({children, buttons, buttonContainer}) { const ButtonContainer = buttonContainer // 사용자 컴포넌트로 인식되게 첫글자가 대문자인 변수 저장 return ( 로 랜더링 되게 됨 {buttons} .. [React] props children VS vue slot 1. react 의 props.children사용자 정의 컴포넌트 사용시 속성을 주지 않아도 항상 props 로 받을 수 있는 속성이다컴포넌트 합성: 컴포넌트가 다른 컴포넌트나 내용을 감싸서 컴포넌트를 만드는 것을 컴포넌트 합성이라고 하는데 부모 컴포넌트가 자식 요소를 알 수 없을 때 유용합니다.유연성: 컴포넌트를 더 유연하고 재사용 가능하게 만듭니다.다양한 타입: 문자열, 숫자, 엘리먼트, 배열 등 다양한 타입이 될 수 있습니다. import classes from './Modal.module.css';function Modal({ children, onClose }) { return ( e.stopPropagation()}> {children} .. [React] Vue 에는 없는 React 만의 표현들 1) JSX안에서는 항상 최상위 태그는 1개여야만 한다. 불필요한 DOM 노드를 만들기 싫다면function App() { return ( // 혹은 단축표현인 을 써도 된다 );} 2) JSX 에서 inline 스타일로 css 를 줄 때 속성명이 text-align 처럼 하이픈( - ) 이 있다면 textAlign 캐멀케이스로 바꿀 것. 자바스크립트에서 변수, 속성은 케밥 표기법을 쓸 수 없기 때문이다하지만 inline 스타일 css 는 쓰지 말 것function Post(props) { return ( {props.author} {props.content} );}export .. 이전 1 2 3 4 5 다음
