React

React STEP 20 - Create React App - 2

2025. 2. 10. 17:09
728x90

⭐ 생명주기 함수 이해하기

  • 컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속
  • https://chrome.google.com/webstore
 

Chrome Web Store

브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.

chromewebstore.google.com

  • React Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치
  • React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.
  • 실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다

 

1. 단계 1 

  • src/App.js
import React, { Component } from 'react';
 import Lifecycle from './Lifecycle';
 import './App.css';
 class App extends Component {
    render(){
        return (
            <div className="container">
                <h1>React Example</h1>
                <Lifecycle propValue="fromApp" />
            </div>
        );
    }
 }
 export default App;
  • src/Lifecycle.js
 import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        console.log(props);
        console.log(state);
        return {};
    }
    render(){
        console.log("3. render()");
 1-1) 단계1
 src/App.js
 src/Lifecycle.js
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 export default Lifecycle;

 

2. 단계 2

  • src/Lifecycle.js
import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(), "+props.propValue);
        return {tempState: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState : "+this.state.tempState);
        console.log(this.state);
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 1-2) 단계2
 src/Lifecycle.js
export default Lifecycle;

 

3. 단계 3

  • src/Lifecycle.js
import React, { Component } from 'react';
 class Lifecycle extends Component {
    constructor(props){
        super(props);
        this.state={};
        console.log("1. constructor()");
        console.log(props);
    }
    static getDerivedStateFromProps(props, state){
        console.log("2. getDerivedStateFromProps(). "+props.propValue);
        return {tempState1: props.propValue};
    }
    componentDidMount(){
        console.log("4. componentDidMount()");
        console.log("5. tempState1 : "+this.state.tempState1);
        this.setState({tempState2: true});
    }
    shouldComponentUpdate(props, state){
        console.log("6. shouldComponentUpdate(), tempState2 : "+state.tempState2);
        return state.tempState2;
        // return false;
    }
    render(){
        console.log("3. render()");
        return (
            <h2>This is Render Function.</h2>
        );
    }
 }
 
 export default Lifecycle;

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'React' 카테고리의 다른 글

React STEP 22 - Create React App - 4  (0) 2025.02.11
React STEP 21 - Create React App - 3  (1) 2025.02.11
React STEP 19 - Create React App - 1  (0) 2025.02.10
React STEP 18 - React 이벤트  (0) 2025.02.10
React STEP 17 - JSX에서 배열 사용  (0) 2025.02.10
'React' 카테고리의 다른 글
  • React STEP 22 - Create React App - 4
  • React STEP 21 - Create React App - 3
  • React STEP 19 - Create React App - 1
  • React STEP 18 - React 이벤트
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 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

인기 글

태그

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

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
React STEP 20 - Create React App - 2
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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