코딩앙마 React JS state, useState
2022. 1. 25. 01:45ㆍ코딩공부/React
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
Hook 이란?
초기 리액트는 state와 lifecycle을 관리하려면 클래스형 컴포넌트를 사용해야 했다.
UI표현만 함수형 컴포넌트를 사용했다.
하지만 리액트 16.8부터는 모든 컴포넌트를 함수형으로 만들 수 있어졌고 함수형 컴포넌트로 스테이트와 라이프사이클을 관리할 수 있어졌다.
🔑 props와 state의 차이
- props와 state 모두 컴포넌트에서 사용 혹은 렌더링할 데이터를 담고 있다.
- props는 부모 컴포넌트 쪽에서 설정해 주는 것이다. 컴포넌트 자신이 변경할 수 없다.
- 반면 state는 컴포넌트 자신이 직접 가지고 있는 값이고, 그 값의 변경도 내부에서 가능하다.
https://studyingych.tistory.com/59
https://devbirdfeet.tistory.com/52
https://chanhuiseok.github.io/posts/react-6/
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에 영향을 미치지 않는다
'코딩공부 > React' 카테고리의 다른 글
리액트 기초반 2주차(1) (0) | 2022.01.29 |
---|---|
리액트 기초반 1주차(3) (0) | 2022.01.28 |
코딩앙마 React Js 이벤트 처리 (0) | 2022.01.24 |
코딩앙마 React JS CSS 작성법 (0) | 2022.01.22 |
코딩앙마 React JS 컴포넌트, JSX (0) | 2022.01.22 |