React 4장 - state
포스트
취소

React 4장 - state

React

state

  • prop가 컴포넌트에 매개변수로 전달되는 역할을 한다면, state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 객체이다.
  • 저장된 state는 값이 바귈 때마다 컴포넌트를 다시 렌더링시킨다.
  • state는 여러 속성을 지정할 수 있으며 useState를 통해 값을 변경(추가,삭제)시키기도 한다.
  • 비동식이다.
  • react에서 useState를 호출해서 사용한다.

예시

  • App 컴포넌트 안에 각각 blue,red의 상태를 지정한다.
  • useState에 전달되는 값은 bluered의 초기값을 의미한다.
  • setStatebluered의 상태를 변경한다.
  • button이 클릭될 떄마다 각각 함수를 실행시키는데, 함수 안에는 state를 변경시킨다.
  • 함수 안에 blue++,red++라고 작성 시, 변수 자체를 변경하는 것으로 취급하여 const에 대한 재할당이 실행된다.
  • 따라서, blue+1,red+1과 같이 작성해주어야 한다.
  • button에 전달된 onClick은 리액트의 이벤트핸들링으로 클릭했을 때의 실행을 의미한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, {useState} from "react"

function App (){
    const [blue, setBlue] = useState(0)
    const [red, setRed] = useState(0)

    function bluePlus(){
        setBlue(blue+1)
    }

    function redPlus(){
        setRed(red+1)
    }

    return (
        <div>
            <div>
                <h3>파란색 버튼 클릭 횟수 : {blue}</h3>
                <button onClick={bluePlus}>블루 버튼 증가시키기</button>
            </div>
            <div>
                <h3>레드 버튼 클릭 횟수 : {red}</h3>
                <button onClick={redPlus}>레드 버튼 증가시키기</button>
            </div>
        </div>
    )
}

예시 2

  • 입력한 글자를 보여주는 기능 구현
  • 보여줄 텍스트의 상태를 지정한다. => useState
  • text의 초기값은 아무것도 지정하지 않은 공백이다.
  • input버튼을 만들고 버튼의 propvalue는 값을 의미하며 input에 입력된 텍스트를 가르킨다. 입력되었을 때 실행되는 이벤트핸들러인 onChange를 작성한다.
  • onChange에 의해 값이 입력될 때마다 inputValue함수를 실행시키는데, input에 입력되는 값을 e 객체를 전달받는다.
  • e안에 target이라는 메서드를 통해 이벤트가 발생된 대상을 지칭하며 value는 발생된 대상의 값을 의미한다.
    • 대상의 값은, 이벤트가 발생한 대상 inputpropvalue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, {useState} from "react"

function App(){
    const [text, setText] = useState('')

    function inputValue(e){
        setText(e.target.value)
    }

    return (
        <div>
            <input type="text" value={text} onChange={inputValue}>
            <p>{text}</p>
        </div>
    )
}

예시 3

  • 삼항연산자를 이용한 상태 변경
  • changeText의 초기값은 ‘React’이다.
  • button 안에서 onClick이라는 이벤트핸들러가 발생 시, 바로 함수를 실행시키는데, 이 함수는 changeText값이 ‘React’가 맞다면 ‘Java’라는 값으로 바꾸고, ‘React’가 아니라면 ‘React’로 상태를 바꿔준다setChangeText.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React,{useState} from "react"

function App(){
    const [changeText, setChangeText] = useState("React")

    return(
        <div>
            Change Mode {changeText}
            <button onClick={
                () => changeText === "React"? setChangeText("Java") : setChangeText("React")
            }>change!</button>
        </div>
    )
}
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.