📌 React에서 prop-types를 사용하기
- React에서 props로 컴포넌트의 속성값을 넘겨줘서 Class의 메소드처럼 사용하는 방법을 Js에서 구현하기.
- React에서는 prop-types 라이브러리도 이용해서 사용한다.
- prop-types이 원래 React의 내장기능이였지만 지금은 라이브러리로 다운받아서 사용한다.
🧩 Input.jsx 코드
// Input.jsx 파일
import React, { Component } from 'react';
import propTypes from 'prop-types';
class Input extends Component {
constructor(props) {
super(props);
this.formRef = React.createRef();
this.inputRef = React.createRef();
this.props = props;
}
// 컴포넌트가 최초로 마운트 되었을 때 처음으로 실행하는 함수
componentDidMount = () => {
// Ref로 Dom에 접근하여 form의 기본 이벤트를 제거한다.
this.formRef.current.addEventListener("submit", (e) => {
e.preventDefault();
})
}
// button을 클릭하면 발생할 이벤트
eventHandler = () => {
console.log(this.inputRef.current.value);
}
// css 설정
style = () => {
return {
container: {
width: "200px",
height: "100px",
border: "1px solid"
},
form: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "0.7rem"
},
label: {
alignSelf: "start",
marginBottom: "3px",
fontWeight: "bold"
},
button: {
alignSelf: "end",
marginTop: "5px"
}
}
}
render() {
// props 요소 관리
const { labelName, btnName } = this.props;
// css 속성 관리
const { container, form, label, button } = this.style();
return <div style={container}>
<form ref={this.formRef} style={form}>
<label style={label}>{labelName}</label>
<input type={"text"} ref={this.inputRef}/>
<button onClick={this.eventHandler} style={button}>{btnName}</button>
</form>
</div>
}
}
export default Input;
// propTypes을 사용하여 props의 기본값과 타입을 체크할 수 있다.
Input.propTypes = {
labelName: propTypes.string,
btnName: propTypes.string
}
// props 기본값 설정
Input.defaultProps = {
labelName: "이름",
btnName: '확인'
}🧩 App.jsx에서 Input.jsx 속성에 값을 넣어주지 않을 경우
// App.jsx 파일
import React, { Component } from 'react';
import Input from './Input';
// App.jsx파일에서 Input.jsx를 불러와서 사용
class App extends Component {
render() {
// Input 컴포넌트에 속성을 넣어주지 않으면 기본값 적용
return <Input />
}
}
export default App;
🧩 App.jsx에서 Input.jsx 속성에 값을 넣어줄 경우
// App.jsx 파일
import React, { Component } from 'react';
import Input from './Input';
// App.jsx파일에서 Input.jsx를 불러와서 사용
class App extends Component {
render() {
// Input에 HTML 속성처럼 속성이름과 값을 넘겨준다.
return <Input labelName="ConsoleCheck" btnName="submit"/>
}
}
🔥 prop-types를 이용하여 컴포넌트들이 더욱더 쉽게 재활용하고 관리될 수 있게 할 수 있다.
📌 JavaScript 요소 노드의 Attribute 사용하기
- HTML의 기본 태그에 임의로 추가한 속성을 업데이트 한다.
- form 태그에 커스텀 속성을 만든다.
🧩 Server 구성
// 서버를 끝낼 필요없이 코드를 적용시켜준다.
$ npm install nodemon
// express를 이용해서 서버를 구축한다.
$ npm install express
// index.js
const express = require("express");
const app = express();
const port = 3000;
// body-parser를 사용하기 위해서 선언
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
// 파일의 정적경로 지정
app.use(express.static(__dirname + "/index.html"));
// http://127.0.0.1로 들어올 경우 HTML 파일 제공
app.get("/", (req, res) => res.sendFile(__dirname + "/index.html"));
// http://127.0.0.1/user로 post로 데이터를 보낼경우 console로 확인할 수 있음
app.post("/user", (req, res) => {
console.log(req.body);
});
// 서버 실행
app.listen(port, () => console.log(`http://127.0.0.1:${port}`));🧩 서버 실행 방법
// nodemon으로 실행
$ nodemon index.js
// 위 코드가 실행이 안될 경우
$ npx nodemon index.js🔥 global 설치로 해결할 수 있으나 npx로 실행하여도 상관없다.
🧩 Client 구성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
</head>
<body>
// "action"이 아닌 사용자 정의 속성인 "url"로 넣어준다.
<form url="/user" method="post">
<label>ID를 입력해주세요.</label>
<input type="text" name="id">
<label>PW를 입력해주세요.</label>
<input type="password" name="pw">
<button type="submit">제출</button>
</form>
</body>
<script>
// 모든 "form" 태그를 가져온다.
const $form = document.querySelectorAll("form");
// setAttribute에 전달할 핸들러 함수를 생성한다.
const setHandler = (path = '/', target) => {
const baseURL = "http://127.0.0.1:3000";
// target의 action을 실행한다.
if(path !== '/') target.action = `${baseURL}${path}`;
else target.action = baseURL;
}
// live 객체로 활동함으로 배열에 담아 사용한다.
[...$form].forEach((node, index) => {
const targetNode = $form[index];
// 각 노드마다 속성의 이름을 "url"로 만들어주며 핸들러 함수를 전달한다.
node.setAttribute("url", setHandler(node.getAttribute("url"), targetNode));
});
</script>
</html>🧩 Submit 결과
👀 React에서 prop-types을 사용해서 컴포넌트 속성에 넘겨줘서 사용한 형태를 JavaScript에서는 최상위 Js파일에서 불러와서 사용하면 가능할것 같다.
JS 코린이