React

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

2025. 2. 6. 14:52
728x90

⭐ 컴포넌트

  • 컴포넌트는 화면을 구성하는 구성 요소를 의미
 //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 />
 )
728x90
저작자표시 비영리 변경금지 (새창열림)

'React' 카테고리의 다른 글

React STEP 6 - 컴포넌트 이해  (0) 2025.02.06
React STEP 5 - 컴포넌트 스타일 2  (0) 2025.02.06
React STEP 3 - 기본 메서드  (0) 2025.02.06
React STEP 2 - 프로젝트 구조 분석  (0) 2025.02.06
React STEP 1 - 환경 구성 및 실행  (1) 2025.02.06
'React' 카테고리의 다른 글
  • React STEP 6 - 컴포넌트 이해
  • React STEP 5 - 컴포넌트 스타일 2
  • React STEP 3 - 기본 메서드
  • React STEP 2 - 프로젝트 구조 분석
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 정보처리기사
  • 개발자
  • React
  • 데이터베이스
  • DBA
  • ajax
  • 웹개발
  • 정보처리기사필기
  • 프론트엔드
  • 알고리즘
  • 앱개발자
  • IT자격증
  • 웹개발자
  • 개발블로그
  • JavaScript
  • DB
  • css
  • java
  • 자바
  • jquery
  • 코딩테스트
  • IT개발자
  • 웹페이지
  • jsp
  • 백준
  • html
  • 백엔드
  • it
  • 정보보안전문가
  • IT자격증공부

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
React STEP 4 - 컴포넌트 스타일 1
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.