[React] Components와 Props

!해당 포스트는 처음 만난 리액트(React) - 소플 강의를 수강하면서 정리한 내용임.

 

Component

react는 component 기반

하나의 component를 반복적으로 사용

리액트 컴포넌트 입력: Props

리액트 컴포넌트 출력: React element

어떠한 속성들을 입력을 받아서 그에 맞는 react element를 출력함.

• 해당 속성에 맞추어 화면에 나타날 element를 만드는 것

컴포넌트 예시: 붕어빵의 틀

 

 

Props

property를 줄여서 prop이라고 함.

props의 예시: 붕어빵 안 재료(팥, 슈크림, 고구마 등..)

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

 

요약

하나의 컴포넌트의 props를 다르게 하여 재사용할 수 있음.

다를 모습의 element를 만들고 싶을 때 해당 데이터를 props에 넣어 전달함.

 

 

 

---

 

Props의 특징

다른 props의 값으로 element를 생성하려면?

→ 새로운 값을 컴포넌트에 전달하여 새로 element를 생성

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 업고, 같은 Props에 대해서는 항상 같은 결과(element)를 보여줄 것

 

 

Props의 사용법

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

이 속성의 값들이 Profile 컴포넌트에 Props로 전달.

 

{
	name: "소플",
	introdction: "안녕하세요",
	viewCount: 1500
}

Props는 이와 같은 형태로 자바스크립트 객체가 됨

 

header={
	<Header title="타이틀"/>
	}
footer={
	<Footer />
}

중괄호를 사용하여 Props값으로 component도 넣을 수 있음

 

 

 

---

 

Function Compoent

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

• 하나의 props객체를 받아서 인사말이 담긴 react element를 return 함
• 함수 컴포넌트는 간단한 것이 장점

 

Class Component

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

• React.Component를 상속받아서 만든다
  • 상속받아서 새로운 자식 클래스를 만드는 것
  • React.Component를 상속받았기 때문에 Welcome은 React Component

 

Component이름은 항상 대문자로 시작해야 한다

• 소문자로 시작하는 것은 DOM 태그로 인식함

 

Component 렌더링

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

const element = <Welcome name="인제"/>;
ReactDOM.render{
	element,
	document.getElementById('root')
);

• Welcome 이라는 함수 컴포넌트를 선언하고 있음
• Welcome name=”인제” 라는 값을 가진 element를 파라미터로 해서 ReactDOM.render를 호출한다.
• React는 Welcome에 {name:”인제”}라는 props를 넣어서 호출하고 그 결과로 react element가 생성된다.

 

 

---

 

 

Compoent 합성

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

컴포넌트 안에 또 다른 컴포넌트를 쓸 수 있음

→ 복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현할 수 있다.

 

 

Component 추출

컴포넌트 추출을 잘 활용하면 재사용이 올라감

• 컴포넌트가 작아질수록 컴포넌트의 기능과 목적이 명확해지고 prop도 단순해지기 때문에 다른 곳에서 사용할 확률이 높아짐