[리액트 React] state / state 사용법 / 클래스형 컴포넌트 state / 함수형 컴포넌트 state

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트의 state에 대해 공유할건데요.

state에 대한 내용은 이전에도 작성했었습니다.

제가 이렇게 또 state에 관련된 글을 작성하는 이유는 완전히 state를 제 것으로 만들기 위함입니다.

[리액트 React] state / setSate / 참조형 state / 스테이트

 

 

 

 

state

state는 하나의 컴포넌트 안에서 전역 변수처럼 사용된다.

 

 

 

 

 

1. App.js 작성하기

import React from 'react';
import './App.css'
import UseReactState from './UseReactState';

function App() {
	return(
		<div>
			<UseReactState myString={"뚝딱"} />
		</div>
	)
}

export default App;

 

 

 

 

 

2-1. 클래스형 컴포넌트 UseReactState.js 작성하기

constructor는 생명주기(Lifecycle) 함수 중 가장 먼저 실행 되며, 처음 한번만 호출된다.

생명주기 함수는 클래스형 컴포넌트에서만 사용할 수 있다.

'잉? 생명주기 함수가 뭐야?' 싶으신 분께서는

그냥 '생명주기 함수 중 constructor는 이렇게 생겼구나~'만 하고 넘어가기🤟🏼

import React, { Component } from 'react';


class UseReactState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            StateString: this.props.myString,
            StateNumber: 1004
        }
    }

    render() {
        return(
            <div style={{padding: "0px"}}>
                {this.state.StateString}{this.state.StateNumber}
            </div>
        )
    }
}

export default UseReactState;

 

 

 

 

 

2-2. 함수형 컴포넌트 UseReactState.js 작성하기

함수형 컴포넌트는 클래스형 컴포넌트에서 사용하는 constructor함수를 사용할 수 없다.

useState 문법을 활용하여 state를 사용한다.

import React, {useState} from 'react';


function UseReactState (props) {

    const [ string, setString ] = useState(props.myString)
    const [ number, setNumber ] = useState(1004)


    return(
        <div style={{padding: "0px"}}>
            {string}{number}
        </div>
    )
}

export default UseReactState;

이 글에서는 어떻게 사용하는지 감만 잡은 후에, 아래 링크를 눌러 useState 등 state관련 문법 제대로 이해하기

[리액트 React] setState() 사용법 / state 독학 / 클래스형컴포넌트 setState / 함수형컴포넌트setState / () =

 

 

 

 

3. 브라우저 결과 확인