728x90
🤔 클래스형 컴포넌트
- js 폴더를 만들때에 대문자로 작성해야한다 (Exam1.js)
- Component 상속 받기
- render () 함수 작성하기 (필수)
- 만든 class를 export deault 지정하기
🤔 함수형 컴포넌트
- js 폴더를 만들때에 대문자로 작성해야한다 (Exam2.js)
- 함수 설정하기
- return 구문에 출력하고자 하는 html 코드 작성
- 만든 함수를 export default 지정하기
➰ 클래스형 컴포넌트 만들기
📘 Exam1.js
◾ js 폴더를 만들기
◾ Component 상속 받기
◾ render () 함수 작성하기 ( 필수 )
◾ 만든 class를 export deault 지정
📘 App.js
◾ components 폴더의 Exam1.js를 가져와서 사용을 이름 지정 후 작성해주기
◾ components 폴더의 Exam1.js를 지정한 이름 작성해주기
🔮 출력 화면
기존 js을 이용해서 함수를 출력했을때 아래와 같이 작성했다!
근데 React 좀 더 편하게 작성할 수 있는데 해당 방법에 대해서 다시 실습해보자!
/*
document.getElementById(버튼).addEventListener("click", ()=>{
const count = document.getElementById(카운트);
count.innerText = Number(count.innerText) + 1;
})
*/
📘 Exam1.js
👀 사용할 함수 만들기
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState({ count: this.state.count + 1 })
}
👀 사용할 함수 가져오기
<h1>Count : {this.state.count}</h1>
<button onClick={this.handleClick}>Increment</button>
🔮 출력 화면
➰함수형 컴포넌트 만들기
📘 Exam2.js
◾ js 파일 만들기
◾ 함수 설정하기
◾ return 구문에 출력하고자 하는 html 코드 작성
◾ 만든 함수를 export default 지정하기
👀 사용할 함수 만들기
const [count,setCount] = useState(100);
// count라는 변수에 초기값 100 대입
// count 값(상태)을 변경할 때는 setCount 함수를 이용
const handleClick = () =>{
/* setCount(()=>{return count -1}) */
setCount(()=> count -1)
}
👀 사용할 함수 가져오기
<h1>Count : {count}</h1>
<button onClick={handleClick}>Decrement</button>
🔮 출력 화면
먼가 쉬운 것 같으면서도 어렵고 간단한 것 같으면서 복잡한 것 같은 느낌이다!
어떤식으로 사용하면될지 너무 궁금하다!
728x90
'ON > React' 카테고리의 다른 글
[ React ] Context API이란 ? ⑥ (0) | 2023.09.08 |
---|---|
[ React ] TodoList 실습하기 ⑤ (0) | 2023.09.08 |
[ React ] State lifting up 속성 알아보기 ④ (0) | 2023.09.07 |
[ React ] State 상태 & Props 속성 알아보기 ③ (1) | 2023.09.06 |
[ React ] React 다운로드 및 실행 ① (1) | 2023.09.05 |