[React] props와 state 기본 개념 (+setState, useState)

[React] props와 state 기본 개념 (+setState, useState)

 

 

리액트에서 중요한 두 개념이 바로 props와 state이다.

 

 

 

props는 properties(속성)의 줄임말로,

컴포넌트에게 어떤 값을 전달할 때 사용한다.

즉, 부모 컴퍼넌트가 자식 컴퍼넌트에 값을 전달할 때 사용하는 것이다.

 

props에 대한 자세한 설명은 아래 링크에 나와있다.

[React] 리액트의 기초 문법 몇 가지_2탄

 

 

 

1. state란?

그렇다면 state는 무엇일까.

 

state는 기본적으로 object이며, 컴퍼넌트 자신이 가지고 있는 속성 값이다.

 

state는 동적데이터(dynamic data)와 함께 작업할 때 사용한다.

동적데이터란 변하는 데이터이며 존재하지 않는 데이터일 수도 있다.

 

 

state가 class 컴포넌트 안에 있으면 {변수명}이 아닌 {this.state.변수명}으로 접근해야된다.

import React from "react";

class App extends React.Component{  
    state = { num: 0 }; 
    render() {
        return (
            <div>
                <h1>The number is: {this.state.num}</h1>
            </div>
        );
    }
}

export default App;        // "The number is: 0" 반환

 

 

 

2. setState()

props는 읽기 전용이라 변경할 수 없지만, state의 경우 변경할 수 있다.

변경할 땐 setState()를 통해 변경하면 된다.

 

setState() 함수를 호출하면 리액트는 state를 refresh하고 render 함수를 호출한다.

 

즉, setState()를 사용하지 않고 state를 직접 변경하려고 하면

리액트는 바뀐 state는 물론 render function도 호출하지 않게 된다.

 

import React from "react";

class App extends React.Component{  
    state = { num: 0 }; 
    add = () => {
        this.setState({ num: 1 })
    };
    render() {
        return (
            <div>
                <h1>The number is: {this.state.num}</h1>
                <button onClick={this.add}>Add</button>
            </div>
        );
    }
}

export default App;   

 

 

 

3. useState()

state를 변경해야 할 때 useState() 라는 Hook도 자주 쓰인다.

 

export default function Hello() {
    let name = "James";
    function changeName() {
        name = name === "James" ? "Tom" : "James";
        console.log(name);
    }

    return (
        <div>
            <h1>{name}</h1>
            <button onClick={changeName}>Change</button>
        </div>
    );
}

 

위의 코드는 언뜻 보면 change 버튼을 눌렀을 때 name이 Tom으로 변경되어야 할 것 같지만 실행해보면 변경되지 않는다.

하지만 콘솔 창을 확인해보면 버튼을 누를 때마다 name이 변하는 것을 확인할 수 있다.

name이라는 변수가 업데이트는 되지만 DOM에는 반영이 안 되는 것이다.

 

만약 Vanilla JavaScript로 작성하는 것이라면 아래와 같이 id를 설정하여 업데이트 해주면 된다.

export default function Hello() {
    let name = "James";
    function changeName() {
        name = name === "James" ? "Tom" : "James";
        document.getElementById("name").innerText = name;
    }

    return (
        <div>
            <h1 id="name">{name}</h1>
            <button onClick={changeName}>Change</button>
        </div>
    );
}

 

리액트는 let name = "James"로 선언한 변수를 state로 인식하지 않는다.

state로 만들어주려면 useState를 이용하면 된다.

 

useState()는 배열은 반환해주는 함수이며,

첫 번째 파라미터는 state(변수명이라고 생각하면 된다)이고,

두 번째 파라미터는 state를 변경해주는 함수이다.

useState() 안에 들어가는 값은 초깃값이다.

 

useState()를 이용해 state를 변경하는 방법은 아래와 같다.

import { useState } from "react";    // useState()를 이용할 때는 react에서 import 해주어야 한다

export default function Hello() {
    const [name, setName] = useState("James");    // 배열 구조 분해
    function changeName() {
        const newName = name === "James" ? "Tom" : "James";
        setName(newName);
    }

    return (
        <div>
            <h1 id="name">{name}</h1>
            <button onClick={changeName}>Change</button>
        </div>
    );
}

 

 

 

 

 

[tip] props와 state의 선언 위치가 헷갈린다면 아래를 참고하면 좋다.

 

props

<tag1>
    <tag2 이름: ooo  국적:ooo > 
    </tag2>
</tag1>

태그 안에 있으면 tag2의 props  (tag2.props.이름)

 

 

state

<tag1>
    태그와 태그 사이에 있으면 state
</tag1>