생활코딩 : React - 컴포넌트 만들기, props, React Developer Tool (10~14강)

<리액트가 없다면> : pure.html 파일

 

 

 

---

<컴포넌트 만들기> : App.js

반드시 1개의 최상위 태그로 시작해야 한다

 

 

1. Subject 컴포넌트를 만들고,

App 컴포넌트 <div> <Subject></Subject> </div> 넣는다

라이브 서버를 보면,

Element -> 리액트가 <Subject></Subject> 내용을 <header></header>로 바꿔서 적용해준다

(웹 브라우저는 리액트를 모르기 때문이다)

 

jsx : 자바스크립트 유사 언어, 페이스북에서 만들었다

 

 

2. TOC 컴포넌트 만들고,

App 컴포넌트 <div> <TOC></TOC> </div> 넣는다

라이브 서버를 보면, 

리스트 추가된다

 

 

3. Content 컴포넌트 만들고,

App 컴포넌트 <div> <Content></Content> </div> 넣는다

 

라이브 서버를 보면, 

본문 추가된다

 

 

 

결론: 컴포넌트 이름에만 집중하게 함으로써 획기적으로 복잡도를 줄였다

 

 

 

---

<props : 속성>

 

컴포넌트의 내용을 다르게해서 이용하고 싶을 때! 

효율적으로 사용하고 싶다면 이용한다.

 

Subject 컴포넌트에서 코드 변경

{ } 와 .props. 활용

App 컴포넌트에서 코드 변경

title, sub에 원하는 내용 넣어준다

 

결과는 이전과 동일하게 라이브서버에 출력된다. but 내부적으로 훨씬 효율적이다

=Refactory했다

 

 

 

App 컴포넌트에 또다른 내용의 Subject 추가하면,

라이브서버에는 다음과 같이 내용이 달라진 Subject 복제본이 추가된다

 

 

---

새로운 기술을 배울 때 4가지를 스스로 하자!

1. 설명서(홈페이지) 읽기

2. 연구하기 

3. 질문하기

4. 검색하기

 

연구하기 -> React Developer Tool 크롬 확장앱 설치 -> 개발자 모드 ->components

아래 같은 도구로 브라우저에서 리액트를 확인할 수 있다,

props 에서 내용을 실시간으로 바꿀 수도 있다

 

 

 

 

 

---

<컴포넌트 정리>

 

-하나의 파일 App.js 안에 1000개의 컴포넌트가 있다면? 복잡

-각각의 컴포넌트 별로 쪼개서 파일 저장

 

- src 디렉토리에 components 디렉토리 만든다

- components 디렉토리 안에 각각의 컴포넌트 파일 만든다 

 

- TOC.js : TOC 컴포넌트 복붙한다

- 리액트 라이브러리에서 컴포넌트 클래스 로딩 코드 넣는다 :  import React, { Component } from "react";

- TOC를 외부에서 가져다 사용할 수 있게 하는 코드 넣는다 : export default TOC;

 

- App.js에서  TOC  컴포넌트를 안에서 사용할 수 있게 하는 코드 넣는다 : import TOC from "./components/TOC";

- App.js에서 TOC 컴포넌트는 지우기

 

결과는 같으나 훨씬 보기 편해졌다.

 

다른 컴포넌트도 모두 쪼개서 파일로 저장하고, 연결한다.