탐구소년

리액트를 사용해 차트를 표시할 수 있는 라이브러리의 종류는 무척 다양합니다. 여기에서는 그 중에서도 사용이 간편하고 많은 분들에게 비교적 친숙할 만한 라이브러리를 사용해보도록 하겠습니다. 자바스크립트나 제이쿼리를 학습하시는 분들이 많이 사용하시는 차트 라이브러리 중에 Chart.js라는 것이 있습니다. 여기에서 사용해볼 리액트 라이브러리인 react-chartjs-2는 Chart.js의 리액트 래퍼라고 소개되어 있는 라이브러리로써, 쉽게 말해 Chart.js를 통해 그려진 차트를 리액트 앱으로 렌더링할 수 있도록 해주는 라이브러리라고 할 수 있습니다. 따라서 차트를 표시하는 데 필요한 기본적인 방법이나 흐름은 기존 Chart.js의 방식과 별반 다르지 않습니다. 그럼 라이브러리를 사용하기에 앞서 설치를 ..

*props의 역할을 안다고 가정하고 진행합니다. 개요 컴포넌트의 props를 다룰 때에는 많은 경우 어떤 데이터 타입의 값이 전달될지를 미리 정하고 다루게 됩니다. 그런데 만일 우리가 정의한 props의 값이 컴포넌트에 제대로 전달되지 않으면 어떻게 해야 할까요? 예를 들어 다음과 같은 컴포넌트가 있다고 하겠습니다. 1 2 3 function Food(props){ return {`맛있는 ${props.food}`} } 이 컴포넌트는 누가 봐도 food라는 문자열 타입의 데이터가 props로 전달되는 것이 마땅해 보이는 컴포넌트입니다. 그러나 여기에 숫자 데이터를 전달하는 것도 충분히 가능한 일입니다. 여기에는 아무런 제한 사항도 없기 때문입니다. 1 2 3 4 5 6 7 function App() {..

create-react-app 수정하기 CRA가 만든 리액트 앱의 구조는 단지 구조일 뿐이므로, 사용자가 원하는 형태의 앱을 만들기 위해서는 많은 부분의 수정이 필요합니다. 여기에서는 리액트 앱을 자동 생성된 상태에서 아무 기능도 없는 상태로 수정하는 방법을 보도록 하겠습니다. 먼저 기본적으로 완성되어있는 구조를 보겠습니다. public을 먼저 살펴보겠습니다. public에는 클라이언트 측에 제공되는 요소들이 주로 자리하고 있습니다. 여기에서 현재 주목할 것은 favicon.ico와 index.html 정도입니다. favicon.ico는 브라우저의 탭에 웹문서의 타이틀과 함께 표시되는 작은 이미지입니다. index.html은 웹문서를 표시할 수 있는 기본 내용만이 작성되어 있는데, 앱 동작시 자바스크립트..

create-react-app(CRA)이란? CRA는 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해주는 도구이자 명령어입니다. 특정 환경의 개발을 바로 진행할 수 있도록 만든 기초 환경을 통틀어 보일러 플레이트(boiler plate)라고 부르기도 하는데, CRA는 그러한 보일러 플레이트의 일종입니다. 사용자는 CRA를 통해 훨씬 빠르고 간편하게 리액트 어플리케이션을 개발할 수 있습니다. create-react-app 시작하기 CRA를 시작하기에 앞서 확인해야할 것은, PC에 npm(노드)이 정상적으로 설치되어 있는지 여부입니다. 명령 프롬프트를 열고 위의 명령어를 실행하면 PC에 설치된 npm의 버전이 나타나게 됩니다. 이때 버전이 나타나지 않으면 설치가 제..