코딩앙마 React JS state, useState

State : 컴포넌트가 가지고 있는 속성값

속성값이 변하면 react는 자동으로 속성값을 업데이트 시켜준다

개발자는 state만 잘 관리하면 화면을 다시 그릴 필요가 없어서 편리하다!

 

export default function Hello() {

    let name = "Mike";

    function changeName() {
        name = name === "Mike" ? "Jane" : "Mike";
        console.log(name);
    }

    return (
        <div>
            <h1>State</h1>
            <h2>{name}</h2>
            <button onClick={changeName}>Change</button>
            {/* 버튼을 눌러도 변화가 없다 */}
        </div>
        
    );
}

이름은 바뀌는데 {name} 부분이 업데이트가 안된다

위에 선언된 let name은 state가 아니고 단순히 변수이기 때문이다

이 컴포넌트가 관리하고있는 상태값이 아니다.

 

export default function Hello() {

    let name = "Mike";

    function changeName() {
        name = name === "Mike" ? "Jane" : "Mike";
        console.log(name);
        document.getElementById("name").innerText = name;
        // id name인 엘리먼트에 Text를 name으로 바꿔준다
    }

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

 

State 란?

https://velog.io/@hidaehyunlee/React-State-%EB%9E%80

[React] 컴포넌트의 State 란?

 

Hook 이란?

초기 리액트는 state와 lifecycle을 관리하려면 클래스형 컴포넌트를 사용해야 했다.

UI표현만 함수형 컴포넌트를 사용했다.

하지만 리액트 16.8부터는 모든 컴포넌트를 함수형으로 만들 수 있어졌고 함수형 컴포넌트로 스테이트와 라이프사이클을 관리할 수 있어졌다.

 

🔑 props와 state의 차이

• props와 state 모두 컴포넌트에서 사용 혹은 렌더링할 데이터를 담고 있다.
• props는 부모 컴포넌트 쪽에서 설정해 주는 것이다. 컴포넌트 자신이 변경할 수 없다.
• 반면 state는 컴포넌트 자신이 직접 가지고 있는 값이고, 그 값의 변경도 내부에서 가능하다.

 

https://studyingych.tistory.com/59

React Hooks 란

https://devbirdfeet.tistory.com/52

React(23) 리액트 훅이란?

https://chanhuiseok.github.io/posts/react-6/

[React] React의 state 설정하기

useState

import { useState } from "react";

export default function Hello() {

    // let name = "Mike";
    const [name, setName] = useState('Mike');
    // [변수명,state를 변경해주는 함수]
    // setName 함수가 호출되어서 name이 변하면 리액트는 이 컴포넌트를 다시 랜더랑해준다
    // useState()의 괄호 안에는 초기값이 들어간다


    return (
        <div>
            <h2 id="name">{name}</h2>
            <button onClick={()=>{
                setName(name === "Mike" ? "Jane" : "Mike");
            }}>Change</button>
        </div>
        
    );
}

동일한 component더라도 state는 따로 관리된다. 즉, 다른 state에 영향을 미치지 않는다