💎 React Component와 클래스형, 함수형 컴포넌트 💡 React 컴포넌트는 React 애플리케이션의 구성 요소입니다. 컴포넌트는 재사용 가능하도록 만들어져 있으며, UI를 작은 조각으로 나누어 관 리할 수 있습니다.
React 컴포넌트는 클래스형 컴포넌트 와 함수형 컴포넌트 로 나뉩니다. 클래스형 컴포넌트는 React.Component 클래스를 상속받아 구현하며, 함수형 컴포넌트는 함수로 구현합니다. 컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 부모-자식 관계를 가집니다. 부모 컴포넌트는 자식 컴포넌트에게 props라는 속성을 전달할 수 있습니다. 자식 컴포넌트는 props를 통해 전달받은 값을 사용하여 UI를 렌더링합니다.
📣 클래스형 컴포넌트 💍 클래스형 컴포넌트 만들기
1. Component 상속 받기
2. render() 함수 작성하기 (필수)!!!!!!!!
3. 만든 calss를 export default 지정하기
import React , { Component } from 'react' ;
// node-moduls 폴더에 있는 react 패키지를 가져옴
class Exam1 extends Component {
constructor ( props ){
super ( props );
this . state = { count : 0 };
}
handleClick = () => {
this . setState ({ count : this . state . count + 1 });
}
// reset =() =>{
// this.setState({ count : 0 })
// } 리셋버튼 만들어봤음..
// 화면 렌더링 시
// render() 함수에서 반환된 값이 화면에 출력됨
render (){
return (
<>
< h2 > 클래스형 컴포넌트 </ h2 >
< h1 > Count : { this . state . count } </ h1 >
< button onClick = {this . handleClick } > Increment </ button >
< button onClick = {this . reset } > reset </ button >
</>
);
}
/* 기존에 react가아닌 js를 사용했을때 코드 ↓
document.getElementById(버튼).addEventListener("click",()=>{
const count = document.getElementById(카운트);
count.innerText = Number (count.innerText) + 1;
})
*/
}
export default Exam1 ;
📣 함수형 컴포넌트 💍 함수형 컴포넌트 만들기
1. 함수 생성하기
2. return 구문에 출력하고자 하는 html 코드 작성
3. 만든 함수를 export default 지정하기
🔔 useState : React에서 제공하는 다양한 React Hooks 중에 하나로, 함수영 또는 클래스형의 컴포넌트에서 로컬의 데이터 상태를
관리할 수 있게 만들어주는 기능이다.
useState는 초기 입력될 상태 값을 인자로 받아서 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 된다
import React , { useState } from 'react' ;
function Exam2 (){
const [ count , setCount ] = useState ( 100 );
// count라는 변수에 초기값 100 대입
// count 값(상태)을 변경할 때는 setCount 함수를 이용
const handleClick = () => { // setCount(()=> {return count -1})
setCount (() => count - 1 ) // 기본 화살표함수 모양 return이 한줄이고 반환값이 한개면 {} , return생략가능
};
return (
<>
< h2 > 함수영 컴포넌트 </ h2 >
< h1 > Count : { count } </ h1 >
< button onClick = { handleClick } > Decrement </ button >
</>
);
}
export default Exam2 ;
📣 App.js - fragment(<></>) : 반환되는 요소를 감쌀 때 사용, 해석 x
- React 주석은 ↓ 밑에 모양처럼 {/* */} 이형태이다
🔔 import Ex1 from './components/Exam1' : components 폴더의 Exam1.js를 가져와서 사용!! Ex1은 변수명 아무거나해도 상관 X
import './App.css' ;
import Ex1 from './components/Exam1' ;
import Ex2 from './components/Exam2' ;
function App () {
// 리액트의 컴포넌트는 딱 하나의 요소만을 반환할수 있다.
// -> 여러 요소를 반환하고 싶을 때는 부모 요소로 묶어준다!
return (
<>
{ /* jsx 주석 */ }
< h1 > Hello React!! </ h1 >
< div > 리액트 배운다~ </ div >
< Ex1 />
< Ex2 />
</>
);
}
export default App ;
🔊 vscode를 재실행하고 cd my-app 을 새로해줘야 정상적으로 실행이된다.
💎 Browser
