React.js (2021-02-15~17)

- 웹개발을 배우기 위해 Udemy에서 the-complete-web-developer-zero-to-mastery를 수강한 내용을 정리하는 포스팅입니다. 

- 틀린점이있거나 다른 의견이 있으시다면 언제든지 댓글로 남겨주시면 감사하겠습니다 :)

---

 Introduction To React.js

리액트의 원칙

- Thinking in component : 지금까지 강의에서는 HTML, CSS, JS 한개씩만가지고 웹사이트를 만들어 보았음. 그런데 웹이 레고 블록처럼 되있어서 조합해 무언가를 만들수 있다면 어떨까? 각자가 작은 요소에만 집중하는 것 

- One way dataflow : 데이터는 위에서부터 하향식으로 흐르고 다른 방향으로 흐르지 않는다. 

빨간 노드가 바뀌면 빨간 노드의 children만 변화를 감지한다. 

- Virtual DOM: 지난강의에서 웹의 속도를 올리기위해서는 DOM 조작을 최소화해야한다고 했다. 지금까지는 프로그래머가 전부 DOM을 일일히 조작해야했다면 리액트는 Virtual DOM(자바스크립트 오브젝트의 일종)을 생성하고 그걸 리액트에 넘기면 리엑트봇이 DOM 조작을 최적화하여 자동으로 해준다. 

- 현재 리액트 생태계가 매우 크다. 

create-react-app 3

이제 npx를 써서 create react app을 실제 설치하지 않고도 사용할 수 있다. 

medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b

Introducing npx: an npm package runner

 create-react-app <project-directory> 명령어를 사용하면 된다. 

위의 명령어를 사용하여 만들어진 폴더에 들어가서 src 폴더에 들어가면 app.js 가 함수형으로 작성되어있는데 본강의를 위해서는 class 형태로 바꾸어 사용하도록 한다. 

이런식으로 바꾸어서 사용

create-react-app을 사용하여 만든앱의 index.js 파일을 보면 react와 react DOM이 나오는것을 볼수 있다.

(import를 사용해서 react를 가져올수 있는이유는 리액트가 내부에 웹팩이있어서 번들링을 알아서 해주기 때문에 그렇다. 자동으로 node modules 에있는 것을 가져오는 것)

- import React from react는 이전강의에서 언급한 우리를 대신해 DOM 조작을 해주는 로봇으로 생각할 수 있다. 
- react는  웹 뿐만아니라 모바일, vr 등등에도 쓰일수 있다. import ReactDOM from 'react-dom'부분은 보여주는 화면이 웹(DOM) 인지 모바일(native) 인지에 따라 달라지는 부분이다. 

- react는 css 한장으로만 관리하는것이아니라 각 컴포넌트별로 css를 적용할 수 있다. 다만 해당 css가 존재하는 경로를 표시해줘야함. (./ 표시는 동일 디렉토리안에 있다는 것을 의미한다. )

참고로 import 할때 뒤에 확장자 js를 안붙이면 자동으로js 파일을 가져오는것으로 인식한다. 

Your First React Component

react 컴포넌트를 만드는건 새로운 html element를 만드는 것으로 생각이 가능한거같다. 

원하는 컴포넌트를 만들고 (컴포넌트의 이름의 첫글자는 대문자로 하는것이 표준이다.)

사용하고 싶은 컴포턴트를 index.js에서 html element처럼 작성해주면 된다. 

컴포넌트는 element한개만 return 가능하고 여러줄로 하고싶으면 괄호로 묶어줘야한다. 

tachyons 패키지를 npm으로 설치하면 ui를 빠르개 생성가능하다.  
(tachyons는 미리 정의된 클래스명을 이용해 시각적요소를 빠르게 이용할 수 있게 해준다.)

설치후 index.js에서 타키온 import하여 사용가능

한가지 의문점이 드는 것은 JS 파일인데 왜 JS 파일안에서 HTML 파일형식의 코드를 작성할 수 있는 점이다. 

->JSX 라는 리액트의 일부가 자바스크립트에서 HTML 형태로 코드를 작성할 수 있게 해준다. 

리액트 컴포넌트를 만들떄 HTML 코드 영역에서는 class를 쓰면 에러가 발생한다. (js안에서의 class 문법을 HTML에 적용하려는 것이기 떄문) -> classname으로 써야 에러가 나지 않는다.

또한 리액트의 컴포넌트에는 prop을 설정할 수 있다. 

컴포넌트에 위와같이 props을 설정해두고 

이런식으로 prop을 사용가능하다. 

화면에 정상적으로 prop이 출력된모습

또한 컴포넌트는 아래와 같이 함수 형태로 만들어 쓸수도 있다. 

Building A React App 1

react에서 export default는 1개만 export하는 것이지만 default 키워드를 빼고 쓰면 여러개를 export 할 수 있다. 

이때 index.js에서 받아서 쓸때는 {} 로 묶어서 가져 와야한다. 

default키워드를 안쓰고 export하면 

이렇게 가져와야한다. 참고로 이번예시는 robots.js에서 export하는 개 1개라서 index.js 에서 1개만 가져오고 있지만 만약 robot.js 파일에서cat 이라는것도 같이 export하고 있었다면 { robots, cat } from './robot' 이런식으로 여러개를 가져올수도 있음.

jsx에서 curly braces를 쓰는것은 자바스크립트 표현인것을 명시해주는 것이다. reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx

Introducing JSX – React

destructure를 아래와 같이 할수도 있다.

원래이렇게 쓰던것을

이렇게 destruct 하거나

이렇게 detruct 할 수 도 있다. 

Building A React App 2

map()을 이용하려 array를 loop 하는 방법에 대해 배운 강의였다.

기존의 지저분하던 코드를 자바스크립트 루프를 이용해서 이하처럼 간략화 할 수 있다. 

참고로 Card element에 Key 값을 정해주는 이유는 강의(219) 6:57참조

완전 간략히 만들어서 이런식으로도 사용가능. 

Building A React App 3

이제 모든 컴포넌트의 parent인 App.js을 만들어서 활용해볼려한다. 

여기에 서치바를 추가하기위해서 서치바 컴포넌트를 만들도록 하자. 

STATE를 이용해서 서치박스와 카드리스트끼리 상호작용할 수 있다. 

STATE는 간단히 말하자면 내 애플리케이션을 묘사하는 object이다. 
- props는 변경이 안되지만 state는 변화가 가능하다. 
- Props는 state로 부터 나오는 것 이라고 생각하면 좋다. 

state를 사용하기 위해서는 class 형태로 App.js를 다시 작성해야한다. 

이런형태로 코드를 작성해주면 

서치바에 입력을 할때마다 이벤트 체인지가 감지된다. 

한가지더 기억할점은 이하와 같이 작성해줘야 작성한 값을 받아올 수 있다는 점이다. 

state를 활용해서 만든 최종완성품은 이하와 같이 짜여지게 된다. 

Styling Your React App

index.css를 수정하여 페이지의 전체적인 모습을 수정할 수 있다.

@font-face를 사용해서 커스텀 폰트를 나타낼수도 있다. 

developer.mozilla.org/en-US/docs/Web/CSS/@font-face

@font-face - CSS: Cascading Style Sheets | MDN

Building A React App 4

지금까지 예제에서는 강의에서 제공된 더미데이터를 가지고 활용했다. 그러나 현실에서는 이렇게 미리 작성된 파일로 데이터를 받기보다는 API를 활용한다. 

하드코딩 되어있는 로봇 데이터들....

실무에서 지난강의에서 만든 App.js 의 robot 부분은 비어있는 array일 것이다. (참고로 state를 가지고 있는 component를 smart component라고 한다. )

실무에서 로봇데이터는 페이지가 로딩되면 인터넷 어딘가에서 가져와서 채우게 될것이다. 

리액트에서는 lifecycle hooks 라는 것이 있는데 component가 실행될때, 수정될때, 사라질때 각각 작동한다. 

reactjs.org/docs/react-component.html

React.Component – React

위의 lifecycle에 나오는 메소드중 componentDidMount()를 이용해서 이후에 배우게될 문법으로 json 파일을 이렇게 받아 올수있다. 

이제 import robots 부분을 쓰지 않아도 된다....

이렇게 간결하게 작성할수도 있다. 

그런데 만약 저 링크에서 정보를 가져오는게 시간이 오래걸린다면 어떡할까??
-> render 부분에서 로딩 화면이 나오게 해주자.

Building A React App 5

화면이 작아지면 카드리스트가 너무 길어서 서치바가 안보이는데 차라리 스크롤 영역을 따로 지정하면 좋지 않을까?

스크롤을 좀만 내려도 서치바가 안보인다....

scroll이라는 component를 만들어서 해결해보자. 

요런식으로 감싸서 활용할수 있는 component가 있으면 편할 것이다. 

지금까지 배운 component들과 다르게 self-closing하지 않는 형태인데 이때는 children을 활용한다. 

위에서처럼 감싸지는 형태의 component는 props에 해당 component의 children이 딸려오기 때문에 아래와 같이 사용이 가능하다. (강의 3:30)

위의 내용을 참고하여 아래와 같이 만들 수 있다. 

참고로 css 스타일을 jsx에서 쓸때는 {{}}으로 감싸야 한다. 

Building A React App 6

지금까지 예제를 만들며 드는 생각은 src 폴더에 파일이 너무많아서 정리가 필요할 거 같다는 것이다. 

실무에서 만드는 앱은 이것보다 더 클텐데 정리가 필요하다.....

아래와 같이 폴더를 따로두어 정리를 하는것이 편하다 .

..은 해당폴더에서 뒤로 간다는 의미 (../components 의 의미는에서 현재폴더에서 뒤로가서 components 폴더로 들어가라는 것)

또한 현재 this.state가 render()에서 쓰이는데 그것도 destructure를 하면 줄일수 있다.

이렇게 많은 this.state를

destructure하면 깔끔하게 정리가 가능하다. 

추가로 create-react-app으로 만든 앱은  터미널창에서 npm run build 명령어를 실행하면 build 폴더안에 모든 파일이 optimized 되어 어디서든지 deploy 가능한 상태로 파일이 생성된다. 

Error Boundary In React

에러가 발생했을떄 앱이 완전히 망가지는것이아니라 더 괜찮은 UI 경험을 하게 해줄 수 있다. 

에러를 감쌀 컴포넌트를 만들고 

아래처럼 감싸줄 수 있다.