해당 컴포넌트가 DOM에 삽입되어 브라우저에서 렌더링되는 것을 의미합니다. (컴포넌트가 화면에 나타날 때, 필요한 작업을 수행을 의미합니다)이때, 리액트는 해당 컴포넌트의 constructor() 함수를 호출하고, 그 후에 componentDidMount() 함수를 호
1.useCallback으로 함수를 래핑함 2. 의존성 값(logCount)이 변경될 때만, 함수가 호출되도록 useEffect에 추가 3. 이전 값(prevState)이 반영된 최신값으로 저장되도록, 함수형태로 set함수로 정의
간단한 상태를 관리할 때는 useState를, 복잡한 상태를 관리할 때는 useReducer를 사용합니다하나의 값 또는 객체 상태를 관리할 때 사용setState를 통해 상태를 업데이트하고, 이전 상태와 새로운 상태를 합쳐서 새로운 상태를 만듭니다.상태 업데이트가 간단
리액트 공부하는데 참고한 책에서, 모든 함수를 정의할때 useCallback으로 정의하는 것을 보고 의아했다어느 경우에 useCallback을 사용하는지 궁금해졌다함수를 메모제이션 하는 좋은?기능이지만 언제 어떤 경우에 사용하는지 정리가 필요했다.함수를 메모이제이션하는
불필요한 렌더링은 컴포넌트의 상태나 props가 변경되었을 때 해당 컴포넌트와 하위 컴포넌트들이 다시 렌더링 되는 것을 의미합니다.이를 방지하기 위해서는 React.memo를 사용하거나, shouldComponentUpdate와 같은 라이프사이클 메서드를 사용해 렌더링
정해진 기준이 없습니다. \- "일반적으로' 컴포넌트 안에 정의하는 것이 좋음 \- 만약 해당 함수가 다른 컴포넌트에서도 사용되어야 하거나, 컴포넌트 밖에서도 사용해야 한다면 컴포넌트 밖에 함수를 정의하는 것이 적절함재사용성 \- 컴포넌트 안에 함수를 정의하면 해
함수형 컴포넌트를 사용하는 곳에서 useMemo와 React.memo를 동시에 사용할 수 있음함수가 처리해서 결과적으로 반환하는 "값"이 이전과 달라졌는지를 비교, 즉 '값' 자체에 집중함계산 비용이 높은 함수의 결과를 캐싱하여 렌더링 성능을 최적화하는 데 사용리스트를