탐구소년

리액트 어플리케이션에 라우팅 기능을 추가하는 간단한 방법을 알아보도록 하겠습니다. 리액트를 사용해 SPA(Single Page App)를 만들면 index.html이라는 정적 파일에 가상 DOM 객체가 동적으로 렌더링되는 방식으로 앱을 동작시키게 됩니다. 이러한 리액트 SPA에 라우팅 기능을 추가하기 위해 많이 사용하는 것이 바로 react-router-dom이라는 이름의 패키지인데요. 여기에서는 create-react-app을 통해 만든 앱에 해당 패키지를 설치하여 라우팅 기능을 구현해보는 예제를 소개하겠습니다. 먼저 프로젝트를 만들 폴더로 이동을 한 다음, 아래의 명령어들을 차례대로 진행해줍니다. 1 npx create-react-app rrd-demo 1 cd rrd-demo 1 npm instal..

함수형 컴포넌트 함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 this가 없습니다. 함수형 컴포넌트는 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수입니다. 컴포넌트 구조를 단순하게 유지하고자 할 때에는 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 편이 좋습니다. 아래는 함수형 컴포넌트를 사용한 예제 코드인데, 이 글의 앞선 글에서 사용했던 예제를 거의 재활용하다시피 하는 예제이므로 앞선 글을 참고하시면 비교적 편하실 것입니다. 이전 글 => https://penguingoon.tistory.com/214 React 컴포넌트 만들기 | React.Component React.Component 최신 자바스크립트에서는 객체를 만..

React.Component 최신 자바스크립트에서는 객체를 만들기 위한 설계도의 개념인 class가 추가되었습니다. 그리고 리액트를 사용해 컴포넌트를 새로 만들 때는 React.Component라는 클래스를 기반으로 생성하는 것이 가능합니다. 아래는 class 기반의 컴포넌트를 적용한 예제입니다. 이 글 이전의 글에서 사용했던 예제와 거의 흡사합니다. 프로젝트 구조 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 React Simple Example sample-class-component.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class nameList extends React.Com..