React 4

[React.js] Class component vs Functional component

이번에는 Class component와 Function compoent의 차이점을 알아 보겠습니다. Functional component [특징] - 제공하는 기능이 한정적임 - 코드가 간단해짐 - 성능이 빠름 import React from 'react' export default function Hello() { return ( hello? ) } Class component [특징] - 많은 기능들을 사용 가능 - 코드가 길어지고 복잡해짐 - 성능 면에서 조금 느려짐 import React, { Component } from 'react' export default class Hello extends Component { return() { ( hello? ) } } Functional Functi..

개발/React 2020.06.04

[React.js] Client와 Server를 동시에 시작할 수 있는 모듈

서버와 클라이언트를 같이 만들 경우에는 서버/클라이언트를 독립적으로 실행해 줘야 한다. 서버 cmd 창에서 스크립트 치고, 클라이언트 cmd 창에서 스크립트를 치기 귀찮았는데 동시에 실행할 수 있는 모듈이 있었다. 바로 'Concurrently'라는 모듈이다. npm install concurrently --save 위와 같은 명령어로 모듈을 설치한 다음, 최상위에 있는 pakage.json에서 스크립트를 작성한다. 나의 React 폴더는 아래와 같은 구조로 되어 있다. - client - server - pakage.json pakage.json ... "scripts": { "start" : "node server/index.js" ... } client/pakage.json ... "scripts:..

개발/React 2020.06.02

[React.js] Default 코드를 자동으로 생성해주는 모듈

React로 js를 계속 만들다 보면 Default Componet를 생성할 때 기본적으로 적어줘야 하는 코드들이 있다. import React from 'react' function TestPage() { return ( TestPage ) } export default TestPage 대충 위와 같은 형식인데... 여러 Componet를 만들다 보면 손수 코딩하기 매우 귀찮은 지경이다. 이러한 불편함을 감수시키기 위해 VS Code 에서는 확장 모듈을 제공해 준다. 바로 es7이라는 것인데... 위와 같이 VS Code에서 저 네모 테트리스 블럭... 같은 것을 선택하고 es7을 치면 ES7 React를 설치한다. 다음 js를 돌아와 아래와 같은 rfce를 치고 입력을 누르면 기본적인 코드가 출력된다..

개발/React 2020.06.01

[React Native] 개발 환경 설정 (1)

React Native (RN) FaceBook에서 개발한 웹사이트 개발용 라이브러리를 React라고 하는데, 이것을 모바일로 확장한 오픈소스 프로젝트이다. javaScript로 모바일 앱을 개발할 수 있으며 Android, ios를 둘 다 개발할 수 있다는 장점이 있다. 우리가 javaScript로 코딩하면 RN을 거쳐 안드로이드, ios 코드로 변환이 되는 개념인 것이다. 개발 설정을 하기에 앞서 Expo CLI 와 React Native CLI 두 가지의 방법이 있는데 Expo CLI는 라이브러리의 제약이 있다고 하여 React Native로 개발할 것이다. 그럼 환경 설정을 해 보자! 먼저 Window PowerShell 을 키고 윈도우 파일 매니저인 chocolatey를 설치한다. 중요한 것은 ..

개발/React Natie 2020.01.08