[생활코딩 React 강의] #10 ~ #14 : React의 실용성을 피부로 느끼는

생활코딩(이고잉님)의 React 강의를 보고 배운 내용을 정리하는 게시물입니다.

www.youtube.com/watch?v=XMb0w3KMw00&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

---

 

10. 리액트가 없다면

- 이번 시간부터 Component를 만드는 방법에 대하여 배움! (중요한 것이며 제대로 해놔야 함)

- React의 기능을 사용하지 않은 채로 만든 후에 React로 전화하면서 기능을 이해하는 방향으로 수업

- Public 디렉토리 : 'run npm start'했을 때 찾는 root

현재 html 상태 / 홈페이지 상태

만약 현재 pure.html의 코드가 약 10,000줄~20,000줄이면 어떨까?

≫ header와 nav, 그리고 article 등을 사용자 정의 태그(Component)로 숨기면 가독성있게 코딩할 수 있다!

---

11.1. 컴포넌트 만들기 1

src/App.js 파일

- 코드 상황 : App이라는 class를 만들었고 Component를 상속 받음, 그 클래스에 render라는 메서드가 있음

- 반드시 render라는 함수 있어야함

≫ 자바스크립트의 기본 문법상 함수 앞에 'function'이 붙지만 최신 스펙에서는 함수를 생략함 (render() 자체가 함수를 의미하는 것임)

 

주의할 점 : 하나의 최상위 태그로 진행되어야 한다!

 

- 현재 App 클래스를 살펴보면 전형적인 Javascript 문법과는 다름 

≫ 자바스크립트랑 거의 비슷한데 태그들을(div) 그대로 문자 그대로 사용하면 안 됨 (console에 작성해보면 오류가 남)

Javascript 문법으로서는 오류가 발생함을 알 수 있다.

- 위와 같은 코드들은 귀찮게 문법을 신경 쓸 필요 없도록 페이스북에서 만든 컴퓨터 언어이며 이것을 JSX라고 한다.

- create-react-app이 알아서 JSX를 Javscript로 convert 해주는 것

---

11.2. 컴포넌트 만들기 2
- React는 한 마디로 정리정돈의 도구 (사용자 정의 태그, Component)
- Component의 이름에만 집중하면 되니까 복잡도를 많이 내린 것

pure.html에 작성된 코드들을 모두 Component화한 것임 (title과 sub는 무시해도 무방함)

---

12. props

- 만들어낸 component (사용자 정의 태그)를 Package로 올리면 사람들이 자기의 application에 붙여서 사용할 수 있음

- 하지만 여태까지 배운 내용에서의 문제점 :

≫ Subject는 언제나 똑같은 코드만을 보여주게끔 되어 있음 (Subject 클래스에 header tag의 내용만 보여줌)

 

한 마디로, 내가 어떤 값을 전달하여 그 값을 보여주는 형식으로 코딩이 된다면?

≫ 이것이 props다!

- <a href="1.html"> : 이 tag는 'a' tag임을 알려주고, attribute(href)를 통해 1.html로 link 함을 의미

- a href : tag는 동일하지만 attribute을 다르게 하여 여러 가지로 사용함 (재사용성↑, a tag는 그대로 있고 attribute인 href 뒤에 나오는 페이지만 달라지면 되는 것이니까)

 

React에서 attribute에 해당하는 것은 'props'

 

- 그리고 props를 전달할 때 사용하는 jsx 기호는 {this.props.이름}

this.props.이름 / 여기서 이름은 각각 title과 sub

props로 title과 sub를 넘겨줌

 

전달해주는 값에 따라 형식에 알아서 들어가는 것임! (매우 편리함을 느낄 수 있음)

title과 sub가 Subject의 입력값으로 들어가서 그것에 따라 출력한다는 의미

---

13. React Developer Tools
- 현재의 상태를 우리가 알아내는 도구!

- reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler

- 현재 필자는 Chrome을 사용하고 있어 Chrome에 맞게 Extension Tool을 설치함

Optimizing Performance – React

- 설치 후 우리가 만들어낸 홈페이지 > 개발자 도구 > Component 탭을 클릭하면

만들어낸 홈페이지 > 개발자 도구 > Component 탭

 

말도 안 될 정도로 편리하게 Component들을 확인할 수 있다.

 

(강의에서는 React 탭을 클릭하라고 하시는데 React라는 탭은 사라지고 Components라는 탭으로 바뀐 것 같음!)

---

14. Component 파일로 분리하기

- 저번 글에서

src/App.js 파일

  위와 같은 import들을 확인할 수 있었음

- 이때 가져오는 App은 'import App from './App''이었고, 이때 './App.js'에서 .js가 생략된 것 (이 원리를 이용해서 Component 파일로 분리하기)

 

- 각각의 Component들을 전부 한 폴더의 js 파일로 분리하기

Component 분리한 상태

- 분리한 Component, 즉 .js 파일 안에 여러 가지 변수나 함수가 존재할 수 있음 (현재는 그렇지 않지만)
- 그 많은 것들 중에서 어떤 것을 외부에서 사용할 수 있게 허용할 것인가를 코드를 통해서 작성할 수 있음

export default 파일이름;

- '파일 이름'이라고 하는 class를 가져다 사용할 수 있게 된다는 의미

---

🌞 Props의 의미가 매우 대단하다는 것을 깨닫게 해 준, React를 사용하는 이유를 깨닫게 되는 강의였다!

Component를 모두 분리하고 Props를 이용한 결과