개발자의 개발 블로그

이것을 설치하게 되면, 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을 브라우저에 입력 후, 접속하면 

리액트 공식 홈페이지

리액트 예제는 

실습 위주의 예제와,

개념(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임을 주의하자.

state는 무엇인가?

- 컴포넌트 내부에서 자체적으로 읽고, 업데이트할 수 있는 값을 사용하기 위해 state가 존재한다.

- 모든 리액트 컴포넌트 안에 존재할 수 있는 오브젝트이다(필수는 아니므로 없어도 된다)

- 컴포넌트 내 state가 변경될때마다 해당 컴포넌트는 다시 렌더링된다(=render()함수가 실행된다)

- 

state를 선언하는 방법

원래는 생성자(constructor) 안에 선언해야 하지만, 생성자 밖에 다음과 같이 선언할 수 있다.

이런 형식으로 작성을 하고, 사용할때는 

이런식으로 호출해서 사용하며 결과는 다음과 같다.

state를 수정하는 방법(업데이트 하는 방법)

쉽게 생각하면 이렇게 직접 수정하면 될 것 같지만 직접적인 접근은 절대 안된다.

직접적으로 변경하면 render() 설정들이 작동을 하지 않으므로 값은 바뀌지 않는다(리-렌더링이 되지 않는다)

위와같이 코드를 실행하면 다음과 같은 경고가 발생한다.

Compiled with warnings.

./src/App.js

  Line 19:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

그러므로,  다이렉트로 state값을 수정해서는 안 되며, 

아래와 같이 setState()를 사용하여 값을 변경해야 한다.

변경을 하려면, 이렇게 setState()를 사용한다. 그래야 render()가 정상적으로 리렌더링된다.

즉, setState가 사용되어 state를 변경하면 render()함수가 정상적으로 재작동하게 되며,

state의 값은 새롭게 변경된다. this.setState({}) 으로 기억해두자. 

메소드 ()안에 객체{} 값이 들어가니까..

항상 아래와 같은 구조를 지닌다.

this.setState({

...

.....

})

setState()메소드의 역할은 파라미터로 전달받은 필드를 업데이한 뒤, 컴포넌트가 리렌더링하게 한다.

만약, 렌더링 된 후 몇 초 후에 state값을 바꾸고 싶다면 어떻게 할까?

자바스크립트 문법 중 setTimeout() 함수를 사용하면 된다.

위 코드는 setTimeout() 함수를 사용하여 2초 후에 setState()메소드를 사용하여 state를 변경하는 코드이다.

setTimeout() 함수를 사용하여 state 내 배열에 항목을 추가하려면 어떻게 할까?

2초 후에 person 목록에 추가된다.

그런데, 주의할 점이 있다. 

배열안에

...this.state.person

을 써줘야한다. 이것을 해야 기존 배열이 살아있고, 그 뒤에 추가가 되는 것이다.

이것을 써주지 않으면 person이라는 배열은 기존값들이 전부 사라지고 추가한 항목만 남게 된다.

state와 prop의 가장 큰 차이점은

props는 부모 컴포넌트가 설정하고, 해당 컴포넌트는 받아서 사용하는 "읽기 전용",

state는 해당 컴포넌트가 자체적으로 지난 값으로, 읽을수 있을뿐만 아니라 값을 업데이트하는 기능.