⏳ 2023. 5. 29. - 2023. 6. 4.
상태 끌어올리기
부모 요소에서 자식 요소의 상태를 알아야 하는 경우, 상태 리프팅을 할 수 있다.
상태를 관리하기 위해 리프팅을 많이 하면 그만큼 드릴링(반대의 개념)을 야기하니 조심해야 한다고.. 한다.
다음은 상태 리프팅의 예시이다.
부모 요소에서 id, password값을 직접 관리하고
함수를 넘겨주는 방식으로 값을 알아내는 방법이다.
<!DOCTYPE html>
<html lang="en">
<head>
<style></style>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootEl = document.getElementById("root");
const Id = ({ handleIdChange }) => {
return (
<>
<label>ID: </label>
<input onChange={handleIdChange} />
</>
);
};
const Password = ({ handlePasswordChange }) => {
return (
<>
<label>Pw: </label>
<input type="password" onChange={handlePasswordChange} />
</>
);
};
const App = () => {
const [id, setId] = React.useState("");
const [password, setPassword] = React.useState("");
const handleIdChange = (e) => {
setId(e.target.value);
};
const handlePasswordChange = (e) => {
setPassword(e.target.value);
};
const handleLoginClick = () => {
console.log(`id: ${id}, pw: ${password}`);
};
return (
<>
<Id handleIdChange={handleIdChange} />
<br />
<Password handlePasswordChange={handlePasswordChange} />
<button
disabled={!(id.length && password.length)}
onClick={handleLoginClick}
>
Login
</button>
</>
);
};
ReactDOM.render(<App />, rootEl);
</script>
</body>
</html>'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글
| [카카오테크캠퍼스 9주차] React로 구현하기 (0) | 2023.06.06 |
|---|---|
| [카카오테크캠퍼스 9주차] Vanilla JS로 구현하기 (0) | 2023.06.06 |
| [카카오테크캠퍼스 8주차] React 기초: 스타일과 Error 처리 (0) | 2023.05.31 |
| [카카오테크캠퍼스 8주차] React 기초: Hooks (0) | 2023.05.31 |
| [카카오테크캠퍼스 8주차] React 기초: 리렌더링, 이벤트 핸들링 (0) | 2023.05.30 |
