React 컴포넌트 스타일 1

React 컴포넌트 스타일 이해하기

컴포넌트 이해

---

• 컴포넌트란???? -> 화면을 구성하는 구성 요소를 의미한다

사용 예시:

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

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

• 클래스는 속성과 매서도로 이루어져 있다.

사용 예시:

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

extends 키워드를 사용해서 React.Component를 상속 받는다. 이렇게 제작된 클래스는 React.Component의 기능을 모두 사용할 수 있다.

render() 함수는 return() 함수로 처리된 HTML이나 JSX를 그리는 명령어로, React, ReactDOM에서 모두 사용 가능하다.

ReactDOM에서 사용하는 render() 함수는 실제 HTML에 그려진다

이해를 돕기 위해 기본 JavaScript에서의 클래스를 이해하면 좋다!

JavaScript에서의 클래스 선언:

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

클래스의 실제 사용 인스턴스:

let instance1 = new ClassName(); // new 키워드를 통해 인스턴스 생성.
console.log(instance1.var1); // 전역 변수는 '인스턴스.변수'로 접근.
instance1.classFn(); // 클래스 함수는 '인스턴스.클래스 함수()'로 접근

상위 클래스의 영향을 받은 하위 클래스 선언:

class Children extends Parent {
  // extends 키워드로 상위 클래스 상속
  constructor() {
    super(); //super() 함수로 상위 클래스 생성자에 접근.
  }
}

예제:

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

• React 에서의 컴포넌트 사용

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

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