컴포넌트에는 크게 두가지로 나뉩니다.
1. 클래스형 컴포넌트 2.함수형 컴포넌트
역할은 두 컴포넌트와 같지만 약간의 차이점이 있습니다.
- 클래스형 컴포넌트
장점은 state 기능및 라이프 사이클의 기능을 사용할수 있다는 것과 임의 메서드를 정의할수 있다는 것입니다.
하지만 render함수가 꼭 있어야 하고 JSX를 반환해야됩니다.
- 함수형 컴포넌트
함수형 컴포넌트는 메모리를 클래스형보다 덜 사용합니다. (사실상 별차이가 없다고 하지만 살짝..?)
함수형의 단점은 state와 lifecycle를 사용하지 못한다는 것이었는데 18년도 hooks의 도입으로 해결되어 함수형 컴포넌트를 권장하고 있습니다.
컴포넌트 생성은 어렵지 않습니다.
새로 js파일이나 jsx파일을 생성하여
첫줄에 import React from "react";
를 적고 함수나 클래스 하나를 생성후 return에 jsx문법으로 결과물을 작성합니다.
이후 export default 함수이름 or 클래스이름 ;
을 적어서 내보내주기만 하면 컴포넌트는 완성입니다.
컴포넌트에는 두가지의 상태변수들이 있습니다.
컴포넌트 속성을 설정하기위한 property를 줄인 props와와내부에서 바뀔수 있는 state가 있습니다.
Props
props는 컴포넌트에서 오브젝트로 전달이 됩니다. 전달하는 방법에서는 부모 컴포넌트에서 값으로 전달해도 되고 태그사이에 내용을 넣어서 children으로 넣어줘도 됩니다.
불러오는 방법은 오브젝트에서 불러올때랑 같은 방법으로 해도 되고 ES6문법의 비구조화 할당을 통하여 추출해도 됩니다.
이를 통하여 함수를 내려줘 부모컴포넌트의 state를 변화시키기도 가능합니다.
State
리엑트에서는 불변성때문에 값을 함부러 변형이 불가능합니다. 값을 변형시키기위해는 어떠한 함수를 통하여 다시 입력시켜주는 방법으로 변형이 가능합니다.
그래서 class형 컴포넌트에서는 constructor안에 state를 넣어주어 state를 선언하고 컴포넌트 내부에서 this를 이용하여 사용합니다.(this는 나중에 따로 다루기로..)
constructor에서 꺼내기도 가능합니다. this.state대신 state를 사용하여 선언해줍니다. setstate가 끝난후에 어떠한 작업을 시행하고 싶으면 콜백함수를 만들어 사요하면됩니다.
함수형은 hooks를 써서 클래스형과 비슷하지만 다른 형태를 띄고 있습니다. 다음 hooks에서 좀더 다뤄보도록 하고 클래스형 컴포넌트보다 함수형을 좀더 권장하고 더많이 이용한다고 하더라도 클래스형이 원래 쓰였던만큼 유지 보수를 위해서는 클래스형도 알아야합니다.
알지만 권장하는 형태로 변모하며 사용하면 될것같습니다.
