Props란
기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 Javascript 요소라면 제한이 따로 없다.
주로 Component의 재사용을 위해 사용한다.
const Welcome = (props) => {
return <h2>Hello, {props.name}</h2>;
}
const App = () => {
return <div>
<Welcome name="nana" />
<Welcome name="lala" />
<Welcome name="haha" />
</div>
}
Props의 값을 임의로 변경해서 사용하는 것을 지양한다.
-잘못된 사용 코드-
const Welcome = (props) => {
props.name = props.name + '님';
return <h1>Hello, {props.name}</h1>
}
만약 Props 값을 변경해서 사용하고 싶다면, 새로운 변수를 생성해야 한다.
const Welcome = (props) => {
const username = props.name + '님';
return <h1>Hello, {username}</h1>;
}
<input type='checkbox' checked={false} />
HTML에서 checked 또는 value는 해당 값이 '초기값'으로 쓰이지만 React 내에서는 현재 값을 의미한다.
즉, checked 값이 false로 고정되어 있는 경우, 사용자가 checkbox를 클릭해도 값의 변화가 일어나지 않는다.
만약 '초기값'의 의미로 checked 또는 value를 사용하고 싶다면 defaultChecked
, defaultValue
Attribute를 설정해야 한다.
const Names = () => {
const names = [
{ key: "1", value: "nana" },
{ key: "2", value: "lala" },
{ key: "3", value: "haha" },
];
return (
<div>
{names.map((item) => (
<li key={item.key}>{item.value}</li>
))}
</div>
);
};
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다.
배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.