티스토리 뷰
State
- 리액트 컴포넌트의 내부에서 관리되는 상태 데이터
- 컴포넌트의 상태(state)가 변경되면 컴포넌트는 다시 렌더링 되며 업데이트된 상태를 반영한다( 동작 및 UI 변경 )
- State를 만들 때는 useState()를 사용한다.
useState
- 함수형 컴포넌트에서 상태를 관리하기 위한 Hook으로 배열 비구조화를 통해 (= 객체 구조분해할당) 상태값과 상태를 갱신하는 함수를 반환한다
Child와 useState 예시 코드
// 부모 컴포넌트
import React, { useState } from "react";
function App() {
return <GrandFather />;
}
// 자식1 컴포넌트
function GrandFather() {
const [name, setName] = useState("김할아");
return <Mother grandFatherName={name} setName={setName} />;
}
// 자식2 컴포넌트
function Mother(props) {
return (
<Child grandFatherName={props.grandFatherName} setName={props.setName} />
);
}
// 자식3 컴포넌트
function Child(props) {
return (
<div>
<button
onClick={() => {
props.setName("박할아");
}}
>
할아버지 이름 바꾸기
</button>
<div>{props.grandFatherName}</div>
</div>
);
}
export default App;
- App컴포넌트(최상위 컴포넌트)에서 GrandFather 컴포넌트를 호출한다
- GrandFather 컴포넌트에서 useState를 통해 name 상태를 만들고 Mother 컴포넌트에 name과 setName을 props로 전달한다
- Mother컴포넌트에서 GrandFather에서 받은 props를 Child컴포넌트로 다시 전달한다
- Child 컴포넌트에서 button을 클릭해 setName 함수로 name 상태를 변경한다
'React' 카테고리의 다른 글
[리액트 React] 제이슨 서버 (Json-server) (0) | 2024.03.16 |
---|---|
[리액트 React] 스타일 컴포넌트 (Styled-components) (0) | 2024.03.15 |
[리액트 React] 리랜더링, 페인팅 (0) | 2024.03.15 |
[리액트 React] 컴포넌트, 프롭스 (Component, props) (0) | 2024.03.15 |
[리액트 React] 리액트란? (0) | 2024.03.15 |