React

React STEP 6 - 컴포넌트 이해

2025. 2. 6. 17:05
728x90

⭐ 컴포넌트

  • 컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위
  • 컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.

1. 컴포넌트 조합하기

  • 단계 1
class Component2 extends React.Component {
  render() {
    return (
      <h2> This is imported Component. </h2>
    );
  }
}

class Component1 extends React.Component {
  render() {
    return (
      <div>
        <h1>React Example</h1>
        <Component2></Component2>
      </div>
    );
  }
}

root.render (
  <Component1></Component1>
)
  • 단계2
class Component2 extends React.Component {
  render() {
    let h2Style={
      fontSize: 16,
      fontWeight: "normal"
    }

    return (
      <h2 style={h2Style}>This is imported Component</h2>
    )
  }
}

class Component1 extends React.Component {
  render() {
    let h1Style={
      fontWeight: "normal"
    }

    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Component2></Component2>
      </div>
    )
  }
}

root.render(
    <Component1></Component1>
)

 

2. 생명주기 함수 사용하기

  • React에서 생명주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻합니다.
  • render(), constructor(), getDerivedStateFromProps(), componentDidMount() 함수들은 컴포넌트의 생성 과정에 속합니다.
  • 생명주기 함수 render() 사용하기
  • render() 함수는 return 되는 HTML 형식의 코드를 화면에 그려주는 함수, 화면 내용이 변경되어야 할 시점에 자동 호출
class LifeCycle extends React.Component {
  render() {
    let h2Style= {
      fontSize: 16,
      fontWeight: "normal"
    };

    console.log("3, render()");

    return (
      <h2 style={h2Style}>This is Render Function</h2>
    )
  }
}

class App2 extends React.Component {
  render() {
    let h1Style= {
      fontWeight: "normal"
    }
    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <LifeCycle></LifeCycle>
      </div>
    );
  }
}

root.render (
  <App2></App2>
)
728x90
저작자표시 비영리 변경금지 (새창열림)

'React' 카테고리의 다른 글

React STEP 8 - EcmaScript6 문법 - 1  (1) 2025.02.07
React STEP 7 - 생명주기 함수  (0) 2025.02.06
React STEP 5 - 컴포넌트 스타일 2  (0) 2025.02.06
React STEP 4 - 컴포넌트 스타일 1  (0) 2025.02.06
React STEP 3 - 기본 메서드  (0) 2025.02.06
'React' 카테고리의 다른 글
  • React STEP 8 - EcmaScript6 문법 - 1
  • React STEP 7 - 생명주기 함수
  • React STEP 5 - 컴포넌트 스타일 2
  • React STEP 4 - 컴포넌트 스타일 1
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

인기 글

태그

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

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
React STEP 6 - 컴포넌트 이해
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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