![]()
메모이제이션(Memoization)리액트를 성능 최적화하는 방법에는 대표적으로 `메모이제이션`을 말할 수 있습니다.리액트의 `memo`를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않았을 때, 리렌더링을 방지하여 성능을 최적화 합니다. 특히, 렌더링 비용이 큰 컴포넌트에서 유용합니다.import React, { memo } from 'react';const MyExpensiveComponent = memo(({ data }) => { // 복잡한 연산이나 많은 DOM 조작이 필요한 컴포넌트 console.log('Expensive component rendered'); return ( {data.map(item => ( {it..
![]()
제어 컴포넌트(Controlled Component)는 리액트 상태(state)를 이용해 입력값을 제어하는 컴포넌트를 말합니다.입력 요소의 값(value)를 리액트의 상태와 동기화하고, 사용자가 입력을 변경하면 onChange 이벤트 핸들러를 통해 이벤트를 감지해 setter 함수로 state를 업데이트합니다. (useState Hooks)제어 컴포넌트의 장점은 입력값과 UI가 항상 일치하도록 유지하여 데이터 관리를 용이하게 하고, 입력 값을 유효성을 검사하고, 복잡한 폼을 효과적으로 관리할 수 있습니다.import React, { useState } from 'react';function ControlledInput() { const [value, setValue] = useState(''); co..
![]()
React는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 건네는 단방향 데이터 흐름을 가집니다.Props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.props가 불변이기 때문에 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.import React, { useState } from 'react';function ParentComponent() { const [name, setName] = useState('Original Name'); const handleClick = () => { setName('New Name'); }; return ( ..
