탐구소년

깃허브 계정과 저장소(repository)를 가지고 있다고 가정하고 정리를 진행합니다. 1. package.json 파일 수정하기 리액트 어플리케이션의 package.json 가장 아래 부분에 "homepage" 키와 그에 대한 밸류를 추가합니다. 이는 깃허브 주소를 어플리케이션이 인식할 수 있도록 해 주는 작업입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "name": "...", "version": "0.1.0", "private": true, "dependencies": { ... }, "scripts": { ... }, ..., "homepage": "https://깃헙계정명.github.io/저장소이름" } 2. package.json 의 scripts 항목 수정하기 1..

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

리액트 어플리케이션을 작업하다 보면 가상 DOM요소에 직접 접근해야 하는 상황이 있을 수 있습니다. 이와 같은 상황에서 순수 자바스크립트의 경우에는 다음과 같은 접근을 사용합니다. 1 document.getElementById('ID') 위와 같이 요소에 대한 직접 접근을 하고자 할 때, 리액트 컴포넌트에서는 ref 속성값을 이용하면 됩니다. ref 속성값을 이용하면 자식 요소에 직접 접근이 가능합니다. 다음은 ref를 이용한 간단한 예입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import React from 'react'; import './App.css'; class App extends React.Component{ textRef = Reac..

리액트 어플리케이션에 라우팅 기능을 추가하는 간단한 방법을 알아보도록 하겠습니다. 리액트를 사용해 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..

이번에는 axios라는 도구를 사용해 API호출하고, 그에 따라 동적으로 생성되는 컴포넌트를 만들어보도록 하겠습니다. axios는? axios는 크로스 브라우징에 최적화되어 있는 http 통신용 자바스크립트 라이브러리입니다. 리액트 앱에서 이를 사용하기 위해서는 패키지 설치 후 코딩을 진행해야 합니다. => npm install axios 예제 예제는 랜덤으로 강아지 사진을 제공하는 API에 대한 호출로 진행하도록 하겠습니다. App.js에 클래스 기반의 컴포넌트를 다음과 같이 작성해줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import React from 'react'; import axios from 'axios'; import './Ap..

리액트 컴포넌트에는 생명주기가 있습니다. 모든 리액트 컴포넌트는 초기화, 업데이트, 소멸의 세 단계를 거치게 되는데, 이러한 단계를 컴포넌트의 생명주기라고 합니다. 그리고 컴포넌트에는 생명주기를 다룰 수 있도록 다양한 생명주기 함수가 존재합니다. 여기에서는 자주 사용하게 될 몇 가지에 대해서만 자세히 알아보도록 하겠습니다. (* 클래스 내부에 위치한 함수를 메소드라 합니다) constructor(props) constructor는 클래스형 컴포넌트가 생성될 때 호출됩니다. props 매개변수는 컴포넌트의 속성값이 적용된 상태로 호출됩니다. constructor 메소드 내부에서 반드시 super() 함수를 호출해야 합니다(규칙이니 그대로 사용하기만 하면 됩니다). 1 2 3 4 5 6 7 8 9 10 11..

이제 state에 대해 알아보도록 하겠습니다. state는 동적 데이터를 다룰 때 사용합니다. 동적 데이터란 말 그대로 변경 가능한 데이터를 의미합니다. 컴포넌트를 자바스크립트 객체라고 했는데, 객체의 구성 요소 중 일부의 개수가 바뀐다던지, 속성이 바뀌는 상황을 다룰 수 있도록 해 주는 것이 바로 state인 것입니다. state는 함수형 컴포넌트에서는 지원되지 않는 개념입니다. 따라서 이제부터는 클래스형 컴포넌트를 다루어야 합니다. 클래스형 컴포넌트의 작성을 위해서는 기본적으로 다음과 같은 형태로 시작해야 합니다. 1 2 3 4 5 6 7 8 import React from 'react'; import './App.css'; class App extends React.Component{ } expor..

css-in-js css-in-js는 CSS 코드를 자바스크립트 파일 안에서 작성하는 방식을 의미합니다. CSS 코드가 자바스크립트 안에서 관리되기 때문에 공통되는 CSS 코드를 변수로 관리할 수 있습니다. 또한 동적으로 CSS 코드를 작성하기도 쉽습니다. css-in-js를 지원하는 패키지 중에서는 styled-components가 간편하고 인지도가 높은 편에 속합니다. styled-components 위 명령어로 styled-components를 설치한 다음, Box.js라는 이름의 파일을 만들어 함수형 컴포넌트를 만들겠습니다. 그리고 거기에는 스타일도 적용해주도록 하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React from 'react'; import st..

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

props(속성) props는 컴포넌트에 전달하는 데이터를 의미합니다. 자바스크립트 함수의 매개변수라는 개념을 알고 계실텐데, 컴포넌트의 props 또한 매개변수와 비슷한 역할을 합니다. 전달되어지는 값에 따라서 결과의 차이를 만들어낼 수가 있고, 그로 인해 효율적인 컴포넌트 재사용이 가능해집니다. 컴포넌트 여러 개 사용하기 다음과 같은 구조를 만들고, App.js와 Book.js를 각각 작성해주겠습니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import './App.css'; import Book from './Book'; function App() { return ( ); } export default App; B..