[React] React로 만든 Counter 소스 뜯어보기 - App.js

< React로 만든 Counter 소스 뜯어보기 - App.js >

 

App.js01

 

1. import ~ from ~

 

: 특정한 파일, 설정, 컴포넌트를 외부파일이나 모듈에서 가져올 때 사용한다.

 

(코드 설명)

> react.js 에서 React 코드, 컴포넌트 객체?변수?를 가져온다.

> Counter.js 에서 Counter 코드를 가져온다??

(정확한 의미가 뭔지 아직 모르겠다)

 

---

 

App.js02

 

2. Component 란 ?

 

: 기능을 단위별로 캡슐화하는 리액트의 기본 단위 ?

사용자가 보는 화면은 이 컴포넌트들을 조합해서 만들어진 것

함수형 컴포넌트, 클래스형 컴포넌트가 있다

(아직 공부를 안해서 그런지 설명이 다 두루뭉실하게 느껴짐)

 

 

3. render() 함수

 

: UI에 표시할 DOM tree(React element)를 반환

컴포넌트를 DOM에 부착한다?

컴포넌트 렌더링

클래스형 컴포넌트에서 필수

 

(보충 - Dom tree 란? React element?)

 

(코드 설명)

> class App extends Component : 클래스를 컴포넌트화 시킨다.

> Counter 컴포넌트를 반환한다 - >렌더링

 

---

 

App.js03

 

 

4. export

 

: 함수,객체,값을 내보내고 import로 가져다쓴다.

named / default 두 가지 방식

 

(코드설명)

> 이름없이 App.js를 내보낸다. 

 

(보충: named / default 차이점)

 

---

 

<App.js>

import React, {Component} from "react";
import Counter from "./Counter";

class App extends Component{
  render(){
    return <Counter></Counter>;
  }
}
export default App;

 

정확한 의미를 아시는 분 댓글로 알려주세요!