React STEP 4 - 컴포넌트 스타일 1

⭐ 컴포넌트

• 컴포넌트는 화면을 구성하는 구성 요소를 의미

 //HTML
 <div id="root"></div>

 //JS(Babel)
 const root=ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
 	<h2>Hello React</h2>
 )

• 클래스를 생성하는 구문
  - extends 키워드를 사용해서 React.Component를 상속 받는다.
  - 제작된 클래스는 React.Component의 기능을 모두 사용할 수 있습니다.
  - render() 함수는 return() 함수로 처리된 HTML이나 JSX를 그리는 명령어입니다.
  - render() 함수는 React, ReactDOM에서 모두 사용할 수 있습니다.
  - ReactDOM에서 사용하는 render() 함수는 실제 HTML에 그려집니다.

 class className extends React.Component {
 	render(){
 		return(
 			JSX
 		);
 	}
 }

• 클래스의 선언

 class ClassName {
 	constructor(){
 		this.var1=0; // 전역 변수를 선언합니다.
 		this.var2="variables";
 	}
 	classFn(){
 		// 클래스 내에서는 전역 변수는 this 키워드로 접근합니다.
 		console.log(this.var1);
 	}
}

• 클래스의 선언 예제

class Person {
    constructor(name, gender, age){
        this.name=name;
        this.gender=gender;
        this.age=age;
    }
    profile(){
        return(`${this.name}, ${this.gender}, ${this.age}`);
    }
 }

 const person1=new Person("kim", "man", 45);
 let returnData=person1.profile();
 // console.log(returnData); // kim, man, 45
 class Student extends Person {
    constructor(name, gender, age){
        super(name, gender, age);
    }
    study(){
        return("study hard");
    }
 }
 const person2=new Student("lee", "woman", 19);
 returnData=person2.profile();
 console.log(returnData); // lee, woman, 19
 returnData=person2.study();
 console.log(returnData); // study hard

• 컴포넌트
  - 화면을 구성하는 구성 요소를 의미

 class HelloReact extends React.Component {
 	render(){
 		return(
 			<p>Hello React</p>
 		);
 	}
 }
 const root=ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
 	<HelloReact />
 )