- State는 컴포넌트 내부에서 변할 수 있는 값을 의미한다.
사용자가 텍스트를 작성하거나 체크 박스를 선택하면 변하는 값을 의미한다.
그리고 우리는 state hook을 이용하여 state와 같은 특징들을 쉽게 사용할 수 있다.
- props는 외부에서 받은 값으로, 변하지 않는 값이다.
상위 컴포넌트로부터 전달받은 값인 props는 객체형태로, 읽기 전용인 데이터이다.
state hook
import { useState } from "react";
const [isChecked, setIsChecked] = useState(false);
// 구조 분해 할당으로 useState의 값을 받아온다.
// [상태 변수, 상태 변화 함수] = useState(초기값);
function clickCheck() {
setIsChecked(true);
}
return (
<div>
<input type="checkbox" checked={isChecked} onChange={clickCheck} />
<span>{isChecked ? "선택되었습니다." : "선택하지않았습니다."}</span>
</div>
);
- state는 state = false와 같이 강제로 변환할 수 없다.
- state가 변해야 페이지는 다시 렌더링되는데, 배열이 state일때는 새로운 배열(깊은복사된) 이어야 페이지가 다시 렌더링된다. (같은 배열은 주소가 같기에 변화를 감지하지 못한다.)
Props
- 리액트의 데이터는 기본적으로 위에서 아래로만 전달된다.
- 만약 두 개의 children 컴포넌트가 하나의 상태에 접근하고자 한다면, 두 컴포넌트의 공통 조상의 컴포넌트에 상태가 위치해야 한다.
function Parent() {
return (
<div className="parent">
<h1>안녕하세요</h1>
<Child name={"Hi"} />
</div>
);
};
function Child(props) {
return (
<div className="child">{props.name}</div>
);
};
function Parent() {
return (
<div className="parent">
<h1>안녕하세요</h1>
<Child name={"Hi"} />
</div>
);
};
function Child( { name } ) {
return (
<div className="child">{name}</div>
);
};
- 태그 사이에 값을 넣고 props.children으로 값을 받아올 수도 있다.
function Parent() {
return (
<div className="parent">
<h1>안녕!</h1>
<Child>{"Hi!"}</Child>
</div>
);
};
function Child(props) {
return (
<div className="child">{props.children}</div>
);
};
- 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내기 위해서 함수를 사용한다.
import { useState } from "react";
function Parent() {
const [inputValue, changeValue] = useState("");
return (
<div className="parent">
<h2>{inputValue}</h2>
<Child changeValue={changeValue}/>
</div>
);
};
function Child( {changeValue} ) {
const getValueFromInput = (event) => {
changeValue(event.target.value);
}
return (
<input type="text" onChange={getValueFromInput}/>
);
};
State와 Props를 구분하는 것은 중요하다.
어떤 데이터를 state로 두어야 할까?
- 부모 컴포넌트로부터 props를 통해 전달되면 state가 아닙니다.
- 시간이 지나도 변하지 않는다면 state가 아닙니다.
- 컴포넌트 안의 다른 state나 props를 가지고 계산할 수 있다면 state가 아닙니다.