react의 UI의 기본단위 컴포넌트
컴포넌트는 자주 사용할 것 같은 UI요소의 기본단위(재사용성)
컴포넌트 클래스 Component 모양을 만들어 상속받아서 사용해보자.
클래스 형태로 Component 생성
class Component {
target;
state; // 상태값 컴포넌트의 유지되는 데이터
constructor(target){
//컴포넌트의 target을 설정
this.target = target;
this.setup();
this.render();
console.log("나는 최초 render");
}
setup(){
// 컴포넌트를 초기 설정 렌더링 하기전에 동작하는 함수.
console.log("컴포넌트 초기 세팅");
}
template(){
// 컴포넌트 html템플릿을 반환 해줄거임.
return "";
}
render(){
// 컴포넌트를 타겟 요소에 렌더링
this.target.innerHTML = this.template();
this.setEvent();
}
setEvent(){
// 컴포넌트 이벤트 세팅
console.log("컴포넌트 이벤트 세팅");
}
setState(_state){
// 컴포넌트의 상태를 업데이트
// 업데이트 되면 리렌더링
this.state = {...this.state, ..._state};
this.render();
console.log("나 상태 바뀜");
}
}
class VirtualDOM {
constructor(component,target){
// 매개변수로 전달받은 컴포넌트 생성후 타겟 요소전달.
// 컴포넌트 클래스 생성자 함수의 매개변수로 타겟 전달.
this.Component = new component(target);
}
render(){
// 컴포넌트 렌더링
this.Component.template();
}
}Component를 상속받아 App class 생성
//App class 컴포넌트 상속 받아서 정의
class App extends Component{
setup() {
// App 컴포넌트 초기 세팅 함수
this.state = {items : ["아이템1","아이템2"]};
}
template(){
// App 컴포넌트의 HTML 을 생성해서 반환
const {items} =this.state;
return `
<ul>
${items.map((item)=>`<li>${item}</li>`)}
</ul>
<button>추가</button>
`
}
setEvent(){
//App 컴포넌트의 이벤트 등록
this.target.querySelector("button").addEventListener("click",()=>{
const {items} = this.state;
this.setState({items : [...items,`아이템 ${items.length +1}`]});
})
}
}
// VirtualDOM의
// constructor(component,target) 에 component에 App, target 에 root 가 들어감.
const root = new VirtualDOM(App,document.querySelector("#root"));
root.render();react, reactDOM 라이브러리를 사용해서 위와 같은 결과물을 만들어보자
react, reactDOM 라이브러리
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<!-- react, reactDOM 라이브러리 -->Babel을 가져와서 JSX문법을 사용
-> 백틱을 안써도 된다.<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body>
<div id="root"></div>
</body>
// babel 가져와 JSX 문법을 사용하려고 타입 지정
<script type="text/babel">
class TA extends React.Component {
constructor(a){
// 부모 생성자 함수를 호출하여 초기화
super(a);
this.state = {items : ["아이템1","아이템2"]};
}
render(){
const {items} =this.state;
return(
<> // html 태그를 쓸 때 백틱이 없어도 된다.
<ul>
{items.map((item)=><li>{item}</li>)}
</ul>
<button onClick ={()=>{
this.setState({items : [...items,`아이템 ${items.length +1}`]})
}}>추가</button>
</>
)
}
}
const roots = ReactDOM.createRoot(root);
roots.render(<TA />);
</script>
한걸음씩