개발공부/React

[React] Deploy React App Using Heroku

Heroku is a platform as a service that enables developers to build, run and operate applications entirely in the cloud. I decided to use Heroku for my portfolio react app since it is very confident to deploy applications and I can easily update code with heroku commands. You also don't need to know complex server settings since heroku provides everything through the cloud! In order to start hero..

[React] API 불러오기

API를 불러오기 앞서 axios를 먼저 react에 설치해 주어야 합니다. Axios에 대한 다큐먼트는 아래 링크에서 확인하실수 있습니다. Getting Started | Axios Docs Getting Started Promise based HTTP client for the browser and node.js What is Axios? Axios is a promise-based HTTP Client for node.js and the browser. It is isomorphic (= it can run in the browser and nodejs with the same codebase). On the server-side it u axios-http.com Axios 설치 npm i ax..

[React] class component와 state 활용- 라이프 사이클, React.Component

우리는 function App 컴포넌트를 사용해 뷰를 만들어주었습니다. function App(){ return( hello ) } 하지만, 여기서 즉 function에서는 우리가 state를 사용해줄수없습니다. state를 사용해 주기위해서 class component와 state를 같이 써주어야합니다. **중요** 우리가 class를 써줘야하는 이유는 function에서는 react.component에있는 state를 쓸수없기때문에 class를 써주는것입니다. 반대로 state가 필요없다면 function을 써줘도됩니다. Class를 사용해주는 이유 우선 class를 생성해주는 방법입니다. function App()을 지워주고 아래와 같은 class를 작성해줍니다. import React from ..

[React] map 활용

이번포스트에서는 "맵(map)" 을 활용한 예제를 다뤄보려합니다. 아래와같이 여러 view를 만들어주어야한다고 가정해봅시다. 그리고 각각 Potato가 가진 구성요소(예를 들면 타이틀과 이미지를 하나씩)는 모두 같고, 이름만 다르게 위와같이 만드려합니다. 이때 우리가 위와같이 만들기위해서 potato라는 함수를 3번 만들어주면 갯수만큼 만들어줘야함으로, 재사용 불가능한 코드가됩니다. 이 문제를 해결하기위해서 맵을 쓰려합니다. Map을 써야하는 이유 위와같이 이름만 다르게 해주려한다면, 기존 우리가 알고있던 방법으로는 컴포넌트를 3가지를 그려줬어야했습니다. 하지만 오브젝트에, 텍스트 데이터를 모두 집어넣고, map을 통해 그 오브젝트 하나씩 접근하며 같은 타입의 뷰를 컨텐츠 데이터만 바꿔서 리턴하면, 같은..