Props
props는 변하지 않는 외부로부터 전달받은 값으로 컴포넌트의 속성(property)을 의미한다.
props는 부모 컴포넌트(상위 컴포넌트)로 부터 잔달받은 값이기 때문에 컴포넌트가 최초 렌더링될 때 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
props는 객체 타입으로 어떤 타입의 값이든 전달할 수 있다.
props는 외부로 전달받아 변하지 않는 값으로 함부로 변경되지 않아야 하기 때문에 읽기 전용(read-only)객체이다.
props 사용
✅ props 사용 예시
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"} />
<Child />
</div>
);
}
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 the eldest child</Child>
</div>
);
};
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
};
state
state는 ‘상태’라는 뜻으로 컴포넌트 내부에서 변할 수 있는 값을 의미한다.
React state는 컴포넌트 내에서 변할 수 있으며 이에 따라 화면이 변화한다.
State hook
useState() : React에서 state를 다루는 방법
import { useState } from "react";
✅ useState 사용 예시
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
isChecked
, setIsChecked
는 useState
의 리턴값을 구조 분해 할당한 변수isChecked
는 state를 저장하는 변수, setIsChecked
는 state를 변경하는 함수false
는 state초기 값사용자가 체크박스 값을 변경하면 onChange
이벤트가 이벤트 핸들러 함수인 handleChecked
를 호출하고, 이 함수가 setIsChecked
를 호출하고 결과에 따라 isChecked
변수가 갱신되며, React는 새로운 isChecked
변수를 CheckboxExample
컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.
❗️React state는 상태 변경 함수 호출로 변경해야하는데, 만약 강제로 변경을 시도하면 리렌더링 되지 않거나 state가 제대로 변경되지 않는다.
✅ React Event handling
ex)
<button onClick={handleEvent}>Event</button>
onChange : <input>
<textarea>
<select>
등 사용자의 입력값을 제어하는데 사용
e.target.value
를 통해 input 값 사용 가능function textForm() {
const [message, setMessage] = useState("");
const handleChange = (e) => {
setMessage(e.target.value);
}
return (
<div>
<input type="text" value={message} onChange={setMessage}></input>
<h1>{message}</h1>
</div>
);
};
onClick : 버튼이나 <a>
tag 를 통한 링크 이동 등과 같이 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용
function (buttonForm) {
const handleClick = () => {
alert('Clicked!!');
};
return (
<div>
<button onClick={handleClick}>Button</button>
</div>
);
};