1. component

component에는 두가지 종류가 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트.
원래는 lifecycle을 이용할수 있다는 장점때문에 클래스형 component가 자주 이용되었지만 hooks가 개발된 이후부터는 함수형 component가 자주 이용되고 잇습니다. 리액트 공식 메뉴얼에서도 hooks를 권장하고 있습니다.
하지만 개발은 새로운것을 개발하는 것 뿐만아닌 예전 코드의 유지보수도 해야되기 때문에 이미 작성되어있는 클래스형 components도 이해할수 있어야합니다.(모르면 검색하면 되긴합니다.)

1-1. 클래스형 component

(코드를 좀더 보기쉽게 하기위해 사진을 사용했습니다.)

클래스형 component에는

• render()함수가 꼭 있어야합니다.
  -> 함수형의 return 대신 랜더링할 JSX를 반환하는 render 함수를 사용해야됩니다.
• super(), constructure을 사용하여 porps와 state를 정의해줘야됩니다.

1-2. 공통 component

• export를 통하여 component를 내보낼수(추출) 있습니다.
• 추출된 component는 어디서든지 불러올수 있고, 여러곳에서 사용되기도 합니다.
• import 를 통해서 모듈, component등을 불러올수 있습니다 위 코드에서 {component}는 비구조화 할당으로 react에서 공통모듈이 아니고 함수형이나 클래스형 컴포넌트에서 사용되면 {}안에 선언됩니다.

1-3. 함수형 component

함수형 component는 나중에 hooks 공부장에서 다루겠습니다.

2. Props

컴포넌트에서 부모에서 속성을 정해주는 variable 입니다. 불변성으로 인하여 자식 컴포넌트에서는 변경이 불가능하며 변경을 원한다면 부모컴포넌트에서 변경함수를 props로 내려줘야됩니다.


위쪽 이미지의 코드는 부모 컴포넌트에서 내려주는 방식이고 아래 이미지의 코드는 자식 컴포넌트에서 받는방법입니다. 보내주는 방식은 태그에 내려주는 방식으로 보내주면 됩니다.
props는 자식컴포넌트에서 객체로 전달되기 때문에 this.props를 비구조화 할당으로 받아도되고 직접 아래 이미지의 children처럼 받아도 됩니다. 비구조화 할당에서도 되는 변수명 변경도 가능합니다.

defaultProps를 통해 props의 default 값을 정해줄수도 있고,
propTypes를 통하여 들어와야되는 props의 타입을 정해줄수도 있습니다.
(propTypes는 소문자이고 import할때 PropTypes은 대문자)