리액트에서는 SPA 를 구현하기 위해서 라우팅이라는 개념이 있는데 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.
리액트에서 라우트 시스템을 구축하기 위해 사용하는 방법은 크게 2가지로 React-Router와 리액트 프레임워크인 Next.js 가 있는데 해당 포스팅은 React-Router 를 활용하는 포스팅이다.

Continue reading

싱글 페이지 애플리케이션 중심에는 대표적인 라이브러리/프론트프레임워크 React, Vue/Angular가 있다.

Continue reading

react-virtualized는 React를 사용하여 대량의 데이터를 효율적으로 렌더링하기 위한 라이브러리로, 리스트나 그리드와 같은 컴포넌트에서 성능을 최적화할 때 유용합니다.
안드로이드의 “RecyclerView” 기능과 동일한 역할이라고 볼 수 있다.

Continue reading

리액트를 다루는 기술(개정판)을 참고한 리액트 TODO App 예제 코드이다. 설렁설렁 하기 좋다.

Continue reading

React Hook은 함수 컴포넌트에서 상태(state) 및 생명주기 기능을 사용할 수 있게 해주는 기능입니다. 훅은 함수 컴포넌트에서 상태 관리나 부수 효과(side effect) 등을 더 쉽게 다룰 수 있도록 도와줍니다. 리액트 훅은 함수형 컴포넌트에서만 사용할 수 있습니다.

Continue reading

리액트 컴포넌트의 라이프사이클은 컴포넌트가 생성되고 제거되기까지의 여러 단계에 걸친 메서드들을 나타냅니다. 리액트 라이프사이클은 세 가지 주요 단계로 나눌 수 있습니다:

Continue reading

map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 생성합니다. 이 함수는 배열을 순회하면서 각 요소를 변환하거나 추출하는 데 유용하게 사용됩니다. JavaScript에서 map 함수는 함수형 프로그래밍의 일부로서 배열의 요소를 변형하고 새로운 배열을 생성하는 기능을 제공합니다.

Continue reading

리액트 컴포넌트 내에서도 id를 사용은 가능하나 컴포넌트를 여러번 재활용시에 id는 유니크 해야되는데 DOM내에 여러개가 생겨 문제가 생긴다. 그래서 리액트에서는 컴포넌트 내에서만 동작하는 ref 기능을 사용한다.

Continue reading