Props?
먼저 "Props"는 properties를 줄여 만든 말입니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용되며 props는 읽기 전용이라는 특성을 가집니다. 쉽게 설명하면 props는 하위 컴포넌트에서 수정할 수 없고 데이터나 기능을 수정할 수 없다는 얘기인데 즉 데이터나 기능성 그 자체를 제공하는 데 사용되는 것입니다. 그 예로는 쇼핑몰 사이트 상품의 가격이라던가 상품의 대한 정보에 관한 글처럼 바뀌어선 안 되는 것들이 있습니다.
Props 활용
//<Child text={textValue}/>
<Child text={"I'm TextValue!!"} /> // 위아래 방법 둘다 가능 .
function Child(props){
return(
<div className="child">
<p>{props.text}</p>
</div>
);
};
props.children을 이용해서 value에 접근하는 방식.
function Parent() {
return(
<div className="parent">
<h1>I'm the parent</h1>
<Child>I'm good child</Child>
</div>
);
};
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
};State?
State는 Props와 반대로 컴포넌트 내의 변경될 수 있는 데이터를 관리할 때 사용합니다. State는 컴포넌트 내에서 관리하고 setState() 메서드를 통해 업데이트됩니다. 컴포넌트의 상태가 변경될 때마다 React는 컴포넌트를 변경된 상태에 종속된 하위 컴포넌트를 다시 렌더링 하며 실시간으로 갱신시키는 것입니다. 이러한 특성을 가지는 State는 주로 실시간으로 변경되는 사용자의 입력이라던가, Application의 상태, 그 이외의 동적인 데이터를 저장하고 관리하는 데 사용됩니다. 그 예로는 Youtube의 조회수라던가, 문자 메시지 리스트 등 실시간으로 갱신되는 것들이 있습니다.
먼저 useState를 import 해줍니다.
import { useState } from "react";
state 갱신 함수를 이용하여 state 저장 변수를 갱신시키며 useState() 안의 값을 넣어 state 저장 변수의 초기 값을 설정할 수 있습니다.
체크박스를 통해 state 갱신하기
function CheckCheck(){
const [isChecked, setIsCheced] = useState(false);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
}
return(
<div className ="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked}/>
<span>{isChecked ? "체크 되었습니다." : "체크 되지 않았습니다."}</span>
</div>
);
}
결론: Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용되고 State는 컴포넌트 내에서 변하는 데이터를 관리할 때 사용 됩니다.
'React' 카테고리의 다른 글
| SPA / ReactRouter (0) | 2023.03.13 |
|---|---|
| JSX 활용하기 (0) | 2023.03.13 |
| React / JSX (0) | 2023.03.13 |