함수형 컴포넌트 클래스형 컴포넌트

리액트로 개발을 하다보면 수많은 컴포넌트들을 만들고 뿌려줄 것이다.

 

뤼앸 개발의 근간이 되는 컴포넌트는 크게 2가지 방법으로 만들어 줄 수 있다. 

 

Class 형 컴포넌트  ,   function 형 컴포넌트 2가지다. 

 

먼저 중요하게 짚고 넘어가야 될 것은 

뭘 쓰든 상관은 없다>< 본인 취향에 맞게 선택해서 쓰면 되겠지만 요즘은 최근에 나온 함수형을 많이 쓴다고 한다. 

 

우선 어떤 차이점이 있는지 한번 살펴보면

 

 

 

클래스형 컴포

import React,{Component} from 'react'   // Component도 같이 임포트!

class Search extends Component{  // 상속!!

	render() {     // render 함수 호출 !
    return(
    <>
    
    </>
    )}
}

export default Search  // export!!

 

 

함수형 컴포

 

import React from 'react' // Component 불러오기 X

const Search = () => {    // arrow function 형으로도 정의 가능!! function() 도 가능!

	return(
    <>
    
    </>
    )

}

export default Search

육안으로 봐도 조금 더 간단히 기본 컴포넌트를 구현해줄 수 있다. 

 

 

몇 가지 포인트를 짚자면 

Class 형 컴포넌트에서는 

 

1. class 키워드가 필요

 

2. Component로 상속을 받아야 되공

 

3. render() 메소드가 필수로 존재

 

기능적인 차이도 존재한다. 

 

나도 미니프로젝트 연습하면서 찾아보았는데 

우선 클래스형 컴포넌트에서는 state(컴포넌트 내부에서 바뀔 수 있는 값)의 초기 값을 설정 할 수 있다. 

 

객체형식

this.setState 로 값 변경 가능 

 

함수형 컴포넌트에서는

useState 함수를 통해 state 사용 가능

const [number, setNumber] = useState(0)

useState 함수를 호출하면 배열이 반환 되는데 첫번째는 현재 상태, 두 번쨰는 상태를 바꾸는 함수

useState() 들어갈 값은 초기값!

 

 

props 차이

 

props는 속성을 설정 할 때 사용하는 요소

 

클래스형 컴포넌트

*this.props로 값을 불러올 수 있다. 

const {name, color} = this.props;

 

함수형 컴포넌트 

 props 를 통해 불러올 필요없이 바로 호출 가능

 

const Person = ({name, color}) => {

}

 

 

 

이벤트 핸들링

 

우선 클래스형 컴포넌트에서의 사용법

 

btnClick =() => {  
	alert("클래스형 컴포넌트임돵");
}

return(
<>
	<button onClick={this.btnClick}>클릭</button>         // this 사용!!
 </>
)

 

함수형 컴포에서의 사용법

 

const btnClick = () => {
	alert("함수형 입당~")
}

return(
<>
 <button onClick={btnClick}>클릭</button> 
</>
)

 

 

작성하면서도 느꼇지만 약간의 사용법만 조금씩 다를 뿐이고 아예 모른 상태에서 보면 헷갈릴 수 있을 것이다. 회사에 들어가거나 프로젝트 협력시에 class 형 컴포넌트들도 있을 수 있으니 최소한의 개념정도는 알고 넘어가도록 하자!