3장 : 컴포넌트

3.1 : 클래스형 컴포넌트

얘도 이미 알고 있다~

• 클래스와 함수 컴포넌트 차이는? => state, 라이프사이클 기능, 임의 메서드 정의
• 클래스는 render 함수가 꼭 있어야함

함수형 컴포넌트 + Hooks 사용 권장

• 함수형 : 선언하기 편함, 메모리 자원 덜 사용, 파일 크기 작음
  -> 애의 단점. state, 라이프사이클 api
  -> 근데 해결 됨 Hooks가 나왔기때문

3.2 : 컴포넌트 생성

• 함수형(const + 화살표 함수, function 키워드), 클래스형 둘 중 하나로 생성

const MyComponent = () => {
	return <div></div>;
};

난 화살표 함수 좋아해여 간결함.
암튼 여기도 많이 해봤으니 굳굳

3.3 : props

properties를 줄인 표현. 컴포넌트 속성을 설정할 때 사용

• 부모 컴포넌트에서 사용 가능 : 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정

얘 보면 MyConponent를 App에 불러왔으니 부모는 누구? App.js
그럼 앱.js에서 설정을 하면 되겠죵~?
ㅇㅋㅇㅋ 예전에는 이거 이해 못했는데 이제 함 ㅎ

props 렌더링

• props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용

<MyComponent name="React" />

이렇게 넘겨주면

const MyComponent = (props) => {
	return <div>{props.name}안뇽</div>;
};

props를 파라미터로 받아서 props.name으로 사용~!

defaultProps

Props를 지정하지 않았을 때. 기본값을 설정

const MyComponent = (props) => {
	return <div>{props.name}안뇽</div>;
};

MyComponent.defaultProps = {
	name: '기본이름',
};

이렇게 해당 컴포넌트에서 디폴트 값을 주면 됩니다

Children

컴포넌트 태그 사이의 내용을 보여주는 props

무슨 소리냐하면

<MyComponent>children</MyComponent>

부모 컴포넌트에서 이렇게 자식 컴포넌트 사이에 내용 전달

<div>{props.children}</div>

MyComponent가 이렇게 받으면

또로롱~

비구조화 할당 문법을 통해 props 내부 값 추출하기

아까 props.name, props.children 하면 귀찮티비..
그래서 비구조화 할당 문법 사용하여 바로 추출

const MyComponent = (props) => {
	const { name, children } = props;

	return (
		<>
			<div>{name}안뇽</div>
			<br />
			<div>{children}</div>
		</>
	);
};

객체 값을 추출하는 문법 : 비구조화 할당, 구조 분해 문법

const MyComponent = ({ name, children }) => {
	return (
		<>
			<div>{name}안뇽</div>
			<br />
			<div>{children}</div>
		</>
	);
};

props를 이렇게 사용하면 더 편하지용~?

propTypes를 통한 props 검증

propTypes를 통해서 props 타입을 지정할 수 있음

1. import PropTypes from 'prop-types';

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

이렇게 name을 string 타입으로 지정.
name을 int로 넘겨주면?

Failed prop type: Invalid prop `name` of type `number` supplied to `MyComponent`, expected `string`.

개발자도구에서 오류 발생

isRequired

필수 propTypes 설정

MyComponent.propTypes = {
	name: PropTypes.string,
	fNum: PropTypes.number.isRequired,
};

안주면 없다고 오류 발생~

Warning: Failed prop type: The prop `fNum` is marked as required in `MyComponent`, but its value is `undefined`.

좋아 아는 내용이니 수월하다

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

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

		return (
			<>
				<div>{name}</div>
				<div>{fNum}</div>
				<div>{children}</div>
			</>
		);
	}
}

• this.props로 비구조화 할당
• 내부에서 propTypes 설정 가능

class MyComponent extends Component {
	static propTypes = {
		name: PropTypes.string,
	};

	render() {
		...
	}
}