[React] 3장 : 컴포넌트

컴포넌트 선언방식은 클래스형 컴포넌트와 함수형 컴포넌트가 있다.

rcc + enter -> 클래스형 컴포넌트 작성 코드 생성
rsc + enter -> 함수형 컴포넌트 작성 코드 생성

1. 클래스형 컴포넌트

render 함수가 무조건 있어야 한다.

2. 함수형 컴포넌트

함수를 작성할때 두 가지 방법이 있다. 두 가지 방법은 아예 동일한것이 아니므로 주의!
1. function 키워드 사용
자신이 종속된 객체를 this로 가리킨다.

2. 화살표 함수 사용
   자신이 종속된 인스턴스를 가리킨다.
   함수를 매개변수로 전달할때 유용

3. props

컴포넌트 속성을 설정할 때 사용하는 요소이다.
props값은 컴포넌트를 불러서 사용하는 부모 컴포넌트에서 설정할 수 있다.

(1) 비구조화 할당 문법

구조 분해 문법이라고도 불린다. 함수의 파라미터 부분에도 사용할 수 있다.

import React from 'react';

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다.
      children의 값은  {children}입니다.
    </div>
  );
};

//props 디폴트 값 설정
MyComponent.defaultProps = {
  name : '기본이름'
};

//모듈 내보내기
export default MyComponent;

(2) propTypes

props의 타입을 지정할 수 있다. 이를 사용하려면 PropTypes 모듈을 불러와야 한다.

아래 예시는 name의 값이 무조건 문자열 형태로 받아져야 한다는 것을 의미한다.
props의 타입은 더 많은 종류가 있는데, 페이스북 깃헙에서 prop-types을 확인해보면 된다.

//props 타입 지정
import PropTypes from 'prop-types';

MyComponent.propTypes = {
  name : PropTypes.string
};

(3) 클래스형 컴포넌트에서 props 사용하기

render 함수 안에서 this.props를 조회하면 된다.

class MyComponent extends Component{
  render(){
    const {name, childern} = this.props;
    (```)
  }
}

4. state

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고, 사용되는 컴포넌트 자신은 props의 값을 설정할 수 없다. 즉, 부모만 바꿀 수 있고 자기 자신은 바꾸지 못하는 값이다.

반면, state는 컴포넌트 내부에서 바뀔 수 있는 값이다.

(1) 클래스형 컴포넌트의 state

컴포넌트의 state는 반드시 객체 형태여야 한다.

생성자 메소드로 선언할 수도 있고, 다른 방식으로 아래와 같이 초깃값을 설정할 수 있다.

state = {
  number = 0,
  속성 = 초깃값,
  (```)
};

state의 값은 this.setState를 사용해서 변경할 수 있다. 참고로 this.setState에 객체 대신 함수를 인자로 넣어줄 수도 있다.

this.setState(prevState, props) => {
  return {
    //업데이트할 내용
  }
})

(2) 함수형 컴포넌트의 useState

useState의 초깃값은 객체가 아니어도 되고 자유롭다.
배열 비구조화 할당 문법을 이용하여 사용한다.

const [ 현재 상태, 상태를 바꾸는 함수(세터함수) ] = useState(초깃값);