React

React STEP 16 - State - 2

2025. 2. 10. 15:03
728x90

⭐ State

  • state를 활용한, 1초에 하나씩 수가 증가되는 프로그램

1. 단계 1

  • 구조 생성
class AutoCounter extends React.Component {
  render() {
    let titleStyle = {
      margin: 0, 
      padding: 0,
      fontWeight: "bold",
      color: "#333"
    };

    return (
      <p style={titleStyle}>ReactExample</p>
    )
  }
}

class AuthoCounterBox extends React.Component {
  render() {
    let boxStyle = {
      display: "inline-block",
      padding: 20,
      backgroundColor: "#eaeaea",
      borderRadius: 6
    };

    return (
      <div style={boxStyle}>
        <AutoCounter></AutoCounter>
      </div>
    )
  }
}

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

 

2. 단계 2

  • constructor() 함수는 화면이 그려지기 전, 실행되는 함수로서 초기의 데이터를 설정할 수 있습니다.
  • componentDidMount() 함수는 화면이 그려진 후, 실행되는 함수입니다.
  • setState() 함수는 state 값을 갱신할 때 사용하는 함수입니다. 
class AutoCounter2 extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count : 0
    }
  }

      /*
    timer(){
        // console.log(this.state.count);
        this.setState({
            count: this.state.count+10
        });
    }
    componentDidMount(){
        // this.timer();
        setTimeout(this.timer, 1000);
    }
    */
    /*
    timer(){
        this.setState({
            count: this.state.count+10
        });
    }
    componentDidMount(){
        setTimeout(this.timer.bind(this), 1000);
    }
 */
  timer=() => {
    this.setState({
        count: this.state.count+10
    });
  }
  componentDidMount(){
    // setTimeout(this.timer, 1000);
    setInterval(this.timer, 1000);
  }
  /*
  timer(){
    this.setState({
        count: this.state.count+10
    });
  }
  componentDidMount(){
    setInterval(this.timer.bind(this), 1000);
  }
    */
  render(){
    let titleStyle={
        margin: 0,
        padding: 0,
        fontWeight: "bold",
        color: "#333"
    };
    return(
        <p style={titleStyle}>{this.state.count}</p>
    );
  }

}

class AutoCounterBox2 extends React.Component {
  render(){
    let boxStyle={
        display: "inline-block",
        padding: 20,
        backgroundColor: "#eaeaea",
        borderRadius: 6
    };
    return(
      <div style={boxStyle}>
        <AutoCounter2 />
      </div>
    );
  }
}

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

'React' 카테고리의 다른 글

React STEP 18 - React 이벤트  (0) 2025.02.10
React STEP 17 - JSX에서 배열 사용  (0) 2025.02.10
React STEP 15 - State - 1  (1) 2025.02.10
React STEP 14 - Props의 사용 - 4  (0) 2025.02.10
React STEP 13 - Props의 사용 - 3  (0) 2025.02.10
'React' 카테고리의 다른 글
  • React STEP 18 - React 이벤트
  • React STEP 17 - JSX에서 배열 사용
  • React STEP 15 - State - 1
  • React STEP 14 - Props의 사용 - 4
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

인기 글

태그

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

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
React STEP 16 - State - 2
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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