개발자의 개발 블로그

이것을 설치하게 되면, React 관련 템플릿을 단축키로 작성할 수 있게 된다.

가장 기본적인 단축키로 rcc와 rsc가 존재한다.

rcc 는 class 형태의 컴포넌트 템플릿이고, rsc는 stateless 즉, 함수형 컴포넌트를 만들어준다.

vs code에서 .js 자바스크립트 파일을 생성한 뒤,

rcc 또는 rsc를 입력하면 자동으로 생성하면 코드가 자동으로 생성된다.

npm을 이용해서, yarn을 설치했다.

$ npm install yarn

설치가 되었다. 그런데, 사용하려면 에러가 발생한다.

C:\Users\USER\Desktop\Project\todolist> yarn eject

'yarn'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는

배치 파일이 아닙니다.

이렇게 나온다. 

이럴경우 글로벌로 설치하면 해결된다.

$ npm install -g yarn

리액트 앱을 firebase를 통해 웹 호스팅으로 Deploy하려고 한다.

1. 첫 번째 단계. Firebase CLI 설치

가장 먼저해야 할 일은 모든 디렉토리에서 Firebase에 액세스 할 수 있도록 

Firebase CLI를 전체적으로 설치하는 것. 

아... 그 전에, node.js와 npm이 정상적으로 설치되어 있는지를 확인을 먼저한다.

확인했다면, 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하자.

npm install -g firebase-tools

firebase init

또 한가지. 추가하자면,

한번 구글 로그인으로 성공이 되서 배포를 했다면, 추후에는 무조건 그 메일만 사용이 가능하다.

다른 이메일로 로그인하면 에러가 발생한다. 무조건 최초 등록한 이메일로 접근이 가능하다.

firebase login --reauth

이 명령어를 통해 구글에서 첫 이메일을 로그인해주어야 배포가 진행된다.

✔  Success! Logged in as xxxx@gmail.com

lui-iMac:stock$ firebase deploy

=== Deploying to 'test-8bttd4'...

i  deploying hosting

i  hosting: preparing build directory for upload...

✔  hosting: 9 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/xxxxxx.xxx

Hosting URL: https://xxxxxxxxx.firebaseapp.com

성공.

Hosting URL을 브라우저에 입력 후, 접속하면 

이전에는 var 키워드를 사용하여 변수를 생성하여 값을 담았다.

var 키워드는  ES6에서 const와 let이 나오면서 사용하지 않는다.

var 키워드의 스코프(Scope)는 함수 단위이다.

const : 한 번 설정한 후 변할 일이 없는 값을 선언할 때 사용(상수)

let : for 문 등 값이 계속 유동적으로 변할 가능성이 있을 때 사용

아래와 같은 에러는 

const에서 값을 선언하지 않았을경우 발생하는 에러이다.

const는 상수이기 때문에, 1회 선언되면 그 이후 변경할 수 없다.

SyntaxError: Missing initializer in const declaration

리액트 공식 홈페이지

리액트 예제는 

실습 위주의 예제와,

개념(Concept) 위주의 예제로 구분되어 설명된다.

실습 위주의 예제는 Tic Tac Toe 게임을 만들어보며 개념을 익힐 수 있게 된다.

Setup for the Tutorial will give you a starting point to follow the tutorial.

Overview will teach you the fundamentals of React: components, props, and state.

Completing the Game will teach you the most common techniques in React development.

Adding Time Travel will give you a deeper insight into the unique strengths of React.

자바스크립트 개념 설명

이것 역시 영어 사이트이다. 

개발자 영어가 필요한 이유를 또한번 느꼈다.

최근에 올라온 한글 버전 블로그도 찾았다.

React 예제 한글화

개발은 하는 것은

브라우저에서 하는 것이 매우 쉽게 할 수 있고, 로컬에서 코드를 작성할 수도 있다.

브라우저에서 하는 것은 Codepen을 사용한다.

개인 PC에서 개발하기 위해서는 리액트를 별도로 설치해줘야 한다.

리액트 설치

0. 최신 버전의 Node.js가 설치되어 있는지 확인하고, 설치해둔다.

1. 리액트를 설치한다.

$ npm install -g create-react-app

2. 리액트 프로젝트를 생성 및 세팅한다. my-app이라는 폴더에 설치가 될 것이다.

$ create-react-app my-app

모든 컴포넌트에 state가 있어야 하는것은 아니다.

어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. 

이들은 오직 props만 갖고 있다.

그리고,

stateless 컴포넌트는 클래스 형태가 아니라 함수(functional) 형태로 작성해야 한다.

stateless = 함수형 컴포넌트

state = 클래스 컴포넌트

위와 같이 state를 사용하지 않는 컴포넌트는 클래스를 사용하지 않고

함수형 컴포넌트를 사용한다.

이 컴포넌트들은 그냥 return을 하기 위해 존재한다.(=화면에 뷰를 보여주기 위해 존재한다)

따라서, state뿐만 아니라 리액트 컴포넌트 라이프 사이클조차 필요없다.

사용 못 한다. 사용 안 하는것이 아니라 할 수 없다.

정리

함수형 : state 사용 불가 / render() 함수도 없고, 라이프 사이클도 존재하지 않음 / 오직 return만 갖고 있음.

클래스 : state 사용 가능 / render() 함수가 존재, 라이프 사이클도 존재함.

+ 추가

클래스를 함수형 컴포넌트로 변형할때,

도 제거하는 경우가 발생한다.

하지만, 이것은 컴포넌트를 외부에서 사용할 수 있게 선언하는 문장이므로 삭제하면 안된다.

함수형이던, 클래스 형태건 둘 다 컴포넌트이기 때문이다.

이러한 에러가 발생한다. 그렇게 되면 

컴포넌트 하단에 

export default 컴포넌트명

이 존재하는지 확인해 볼 필요가 있다.

[React] TypeError: Cannot read property 'map' of undefined

에러가 빈번하게 나온다.

이것의 의미는 map을 할 수 없다는 것이다.

state 등에 있던 배열이 이동했거나 삭제되어 

.map을 사용할 수 없을 때 이런 에러가 발생한다.

따라서, 

xxx.map이라면

xxx가 어디있는지 체크해줘야 한다.

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨려면

props를 사용한다고 했다.

부모(App.js)에서 아래와 같이 배열을 선언한다.

기존에는 화면에 나오는지 테스트하기 위해 

render() 내 다음과 같이 작성했었다.

이렇게 작성을 했다면, Movie 컴포넌트가 정상적으로 화면에 4번 출력될 것이다.

물론, Movie에서 this.props.title로 받아주었을때 말이다

하지만, 이렇게 일일히 Movie 태그를 작성하는 것은 비효율적이다. 만약 데이터가 1000개라면?

1000번 복붙을 해야할 것이다. 이것은 말이 안된다.

또한, 몇 개를 사용할 지 모르는 경우가 있다. 이럴 경우 어떻게 할까?

마치 for문, while문을 안 쓰고 배열을 일일히 생성하는 것과 동일하다.

이 때 사용하는 것이 바로 map()함수이다.

이것은 자바스크립트 문법이므로 모든 배열은 map함수를 갖고 있기때문에 그냥 사용하면 된다.

movies 배열을 가져와서 mapping을 한 뒤, 새로운 배열을 만든다..

요소는 movies 배열 안에 있는 <Movie>가 될 것이다.

이렇게 하면, movies 배열안에 들어있는 갯수만큼 출력된다.

그런데 말입니다.

정상적으로 나오긴 하지만, 갑자기 구글 개발자 콘솔에서 에러가 보이기 시작한다.

기존에 복붙할때는 보이지 않던 에러이다.

Each child in an array or iterator should have a unique "key" prop.

array안에 있는 차일드들은 고유한(unique) key prop을 가져야 한다.

리액트에서는 엘리먼트가 많을 경우 고유한 key라는 것을 정해주어야한다.

그래서, movies 배열에 id라는 것을 하나 더 만든후, 중복되지 않게 작성해주자.

이렇게 했는데, 에러가 없어지지 않는다.

map도 일부를 변경해주어야한다.

위와 같이 변경해주면, 에러가 사라진다.

props의 형태를 지정해두고 싶을때는 어떻게 할까?

제목title인데 숫자나 true/false가 출력된다거나,

관객수view인데 문자열만 출력되다거나 하는 상황을 방지하려면 어떻게 할까?

바로 props-type이라는 패키지를 설치해주면 된다.

$ yarn add prop-types

또는

$ npm install prop-types 

https://www.10000duck.com/view_duck/43

설치할 때, 

create-react-app styleTest

로 하면 오류가 발생하며 생성할 수 없다.

무조건 

소문자를 사용해야 한다.

styletest로 변경후 설치한다.

그러면, styletest이 만들어지고 그곳에 리액트가 설치된다.

그러면 

$ cd styletest를 입력한다.

그리고,

styletest 폴더 이동 후 code .으로 바로 vs code 에디터를 열 수 있다.

atom . 도 가능하다!

그러면 

기본 구조가 위와 같이 생성된다.

react-bootstrap-table을 사용하려고한다.

react에서도 <table>로 코딩이 가능하지만, 좀 더 간편하게 npm이 제공된다.

간단하게 멋진 테이블 생성이 가능하다.

사용법은 홈페이지를 참고하자.

홈페이지

1. 터미널에 npm 설치한다.

$ npm i react-bootstrap-table --save

이렇게 설치를 한뒤, 컴포넌트.js에 들어가서... 사용하기 위해서

2. import를 해준다.

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

!!!!!!!!!!!

오류 발생...

테이블이 아무리 해도 안 나온다.

데이터 리스트는 나오는데.... 왜 CSS 적용이 안 되는 것인가?

생각해보니 Bootstrap을 적용해야만 할 것 같은데 어떻게 적용할까?

1) public - index.html에 링크와 스크립트를 추가해준다. 당연히 <head> 태그 사이에..

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>  

그 다음에, 다시 실행하면?

적용된다!

기본 테이블 보여주는 코드는 다음과 같다.

이렇게 하면, 기본 테이블이 예쁘게 커스텀되어 나온다.

그리고 다양한 기능들을 적용할 수 있다.

바로 이 사이트에서 

참고로, 그냥 HTML 테이블 Table Tag로 그냥 만들고 싶다면 다음과 같이 작성하면 된다.

이렇게 하면, 테이블이 생성된다.

Bootstrap을 적용하는 방법은 상단에 

을 해주면 되고, 테이블을 꾸며주는 css 파일도 import하면 된다.

이렇게하면,

테이블 완성!

css파일에서 부를때는 class가 아니라  className임을 주의하자.