분류 전체보기101 React memo React memo 리액트에서 제공하는 고차 컴포넌트(Higher Order Component)이다. 고차 컴포넌트는 어떤 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수이며, React memo는 렌더링이 되어야 할 상황에 놓일 때마다 Props Check를 통해서 자신이 받는 Props에 변화가 있는지 확인을 하고 변화가 있다면 리렌더링을 하고, 변화가 없다면 기존에 렌더링이 된 내용을 재사용한다. React memo는 Props를 기반으로 구성요소만 memoization 하기 때문에 컴포넌트 내에서 useEffect, useState와 같은 훅을 사용하는 경우 변경 여부에 관계없이 컴포넌트가 리렌더링이 된다. 주의할 점은 부모 컴포넌트에서 객체를 자식 컴포넌트에게 Props로 전달할 때 R.. 2023. 11. 20. 프로젝트 회고 항해99의 프로젝트가 어느덧 끝이 났다. 하루에 하나씩 글을 썼다면 오늘 글의 제목이 99일 차가 됐겠지만 그렇지 못한 부분에 대해 반성을 하며 이 글을 작성하고자 한다. 오늘 글의 주제는 최종 프로젝트에서 사용한 기술들이다. CS 지식이 거의 없다시피 한 상태로 프로젝트를 시작했기 때문에 항해99를 진행하면서 배웠던 기술 또는 프레임워크, 빌드 도구들 위주로 글이 작성되겠지만, 사용했던 것들의 특징과 장, 단점에 대해서 글을 작성할 것이다. 빌드(Vite) 최종 프로젝트의 빌드는 vite로 진행을 했다. 강의에서는 CRA를 활용해서 빌드를 했지만 최종 프로젝트에서는 vite를 통해 빌드를 했는데, 그 이유와 CRA, Vite의 차이점에 대해서 알아보자. CRA(Create React App) CRA는 .. 2023. 11. 13. 62일차 (Array List와 Linked List) 어레이 리스트(Array List)와 링크드 리스트(Linked List)는 데이터를 저장하는 두 가지 기본적인 자료 구조이다. 어레이 리스트(Array List) 연속적인 메모리 할당: 어레이 리스트는 연속된 메모리 위치에 데이터를 저장한다. 이것은 인덱스를 통한 빠른 접근을 가능하게 해 준다. 인덱스를 통한 빠른 접근: 특정 인덱스의 요소에 대한 접근이 빠르며, 일반적으로 O(1)의 시간 복잡도를 가진다. 크기 조정의 어려움: 초기에 할당된 공간을 넘어서는 경우, 새로운 더 큰 어레이를 생성하고 기존의 데이터를 복사해야 한다. 이는 비용이 많이 드는 작업일 수 있다. 삽입과 삭제의 비효율성: 중간에 요소를 삽입하거나 삭제할 경우, 다른 모든 요소들을 이동해야 하므로 O(n)의 시간이 소요된다. 링크드.. 2023. 11. 10. 61일차 (리액트에서 자주 쓰이는 이벤트의 타입) Button // onClick const handleClick = (event: React.MouseEvent) => {}; // onMouseDown const handleMouseDown = (event: React.MouseEvent) => {}; // onMouseUp(눌렀다 뗐을 때) const handleMouseUp = (event: React.MouseEvent) => {}; // onMouseEnter (마우스가 요소 위로 올라갔을 때) const handleMouseEnter = (event: React.MouseEvent) => {}; // onMouseLeave (마우스가 요소를 벗어났을 때) const handleMouseLeave = (event: React.MouseEvent.. 2023. 11. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 26 다음 728x90
