천천히 차근차근

클래스형 컴포넌트 import React from "react"; import PropTypes from 'prop-types'; /* 1. 클래스형 컴포넌트의 기본 뼈대 2. React.Component를 상속받는 것. 3. 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. 4. React.Component에서 제공하는 기능들을 상속받아 사용하기 위함. 5. 클래스형 컴포넌트를 사용하는 것은 state를 사용하기 위함. */ class App extends React.Component { /* 1. render() 함수를 선언하지 않았는데 사용할 수 있는 이유: React.Component를 상속 받았기 때문에. 2. 함수형 컴포넌트는 return 문이 JS..

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

import React, {Component} from 'react'; import {View, Text, Alert, StyleSheet} from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; import NumList from './src/numList'; class App extends Component { state = { appName: 'My First App', random: [23, 11] } onAddRandomNum = () => { const randomNum = Math.floor..

비동기성 setState 메소느는 비동기로 state를 업데이트 한다. state는 조심해서 다뤄야 한다. setState를 통해 값 변경할 때, 현재 버전을 카피한 다음에 업데이트를 하게 된다. onAdd = () => { this.setState(prevState => { return { sampleNum: prevState.sampleNum + 1 } }) } prevState(callback)를 사용해서 state를 변경한 다음에 실행되도록 한다.

State Component에서 rendering되는 데이터를 담고 유지, 관리하는 자바스크립트 객체이다. component의 rendering되는 데이터를 다루기 때문에 매우 중요하다. state 값에 따라 화면에 보여지는 output이 달라질 것이다. class component안에서 사용이 가능하고, 함수 컴포넌트를 정의했다면 state의 활용은 불가하다. state 활용 불가 예시 const App = () => { return ( ) } state 시작 우리는 App이라는 클래스를 사용할 것이기 때문에 state를 사용할 수 있다. state는 render함수 밖에서 정의가 된다. Hello World라는 문자를 직접 입력하는 것과 변수에 값을 할당해서 출력하는 것은 굉장한 차이가 있다. 결과는..