[ React ] React [클래스/함수]컴포넌트 알아보기 ②

🤔 클래스형 컴포넌트

1. js 폴더를 만들때에 대문자로 작성해야한다 (Exam1.js)
2. Component 상속 받기
3. render () 함수 작성하기 (필수)
4. 만든 class를 export deault 지정하기

 

🤔 함수형 컴포넌트

1. js 폴더를 만들때에 대문자로 작성해야한다 (Exam2.js)
2. 함수 설정하기 
3. return 구문에 출력하고자 하는 html 코드 작성
4. 만든 함수를 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>

🔮 출력 화면

 

---

먼가  쉬운 것 같으면서도 어렵고 간단한 것 같으면서 복잡한 것 같은 느낌이다! 

어떤식으로 사용하면될지 너무 궁금하다!