컴포넌트와 Props

5장 컴포넌트와 Props

5.1 컴포넌트에 대해 알아보기

입력(Props) -> 리액트 컴포넌트 -> 출력(리액트 엘리먼트)
; 리액트 컴포넌트가 해주는 역할
어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해 주는것

5.2 Props의 대해

5.2.1 Props의 개념

• 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

5.2.2 Props의 특징

• 리액트 컴포넌트의 props는 바꿀수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 함

5.2.3 Props 사용법

function App(props) {
	return (
		<Profile 
			name="소플"
			introduction="안녕하세요, 소플입니다."
      		viewCount={1500}
		/>
	);
}

• 자바스크립트의 객체로 표현

{
  	name:"소플",
	introduction:"안녕하세요, 소플입니다.",
    viewCount:1500
}

5.3 컴포넌트 만들기

5.3.1 함수 컴포넌트

• 리액트의 컴포넌트를 일종의 함수
• 장점 : 간단한 코드

function Welcome(props) {
  return <h1>안녕,{props.name}</h1>;
}

5.3.2 클래스 컴포넌트

class Welcome extends React.Component {
  render(){
  	return <h1>안녕,{this.props.name}</h1>
  }
}

• 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다

5.3.3 컴포넌트 이름 짓기

• 항상 대문자로 시작해야함
  : 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식함

//HTML div 태그로 인식
const element = <div />
      
//Welcome이라는 리액트 컴포넌트로 인식
const element = <Welcome name="인제" />

5.3.3 컴포넌트 렌더링

5.4 컴포넌트 합성

• 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것

function Book(props) {
	return (
		<div>
			<h1>{`내 이름은 ${props.name}입니다.`}</h1>
			<h2>{`나이는 ${props.age}입니다.`}</h2>
		</div>
	);
}

function Library(props) {
	return (
		<div>
			<Book name="마이클" age="20살" />
			<Book name="크러쉬" age="30살" />
		</div>
	);
}

5.5 컴포넌트 추출

• 큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만든다
• 장점

• 추출을 잘 활용하게 되면 컴포넌트의 재사용성이 올라감
• 컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해짐
• props도 단순해지므로 다른곳에서 사용할 확률이 높아짐
• 개발속도도 향상

• 기능 단위로 구분하는것이 좋고, 나중에 곧바로 재사용이 가능한 형태로 추출하는것이 좋음