[리액트] Component와 Props

Component

• 리액트는 컴포넌트 기반 구조이다.
• 레고 블록처럼 컴포넌트를 조립해서 개발
• 컴포넌트는 함수(function)와 형태가 비슷하다. 입력(props) 값을 받아서 react element로 반환을 한다.

Componenet와 react element 간의 관계는 붕어빵 틀과 붕어빵의 관계다. 
객체지향에서 나오는 클래스와 인스턴스의 관계와 흡사하다.

Props

• Property를 줄여서 사용
• 리액트 컴포넌트의 속성을 의미한다.
• 컴포넌트에 전달한 다양한 정보를 담고 있는 자바스크립트 객체
• 붕어빵에 들어가는 속재료

Copyright soaple(https://www.inflearn.com/users/364684/@soaple)

Props의 특징

• read-only : 읽기만 할 수 있고, 변경은 불가능하다.
• 모든 리액트 컴포넌트는 Props에 관해서는 Pure함수 같은 역할을 해야 한다.

 

Props 사용법

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

function App(props) {
	return (
		<Layout
			width={2560}
			height={1440}
			header={
				<Header title="홍길동의 블로그입니다." />
			}
			footer={
				<Footer />
			}
		/>
	);
}

 

Component 만들기 및 렌더링

Component 만들기 

• 리액트에서 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 클래스 컴포넌트는 초기에 많아 사용했지만 현재 대부분 함수 컴포넌트를 사용한다.

 

Function Component (간단한 코드가 장점)

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

 

Class Component(ES6의 클래스를 이용)

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

• React.Component를 항상 상속받는다.

 

Component의 이름은 항상 대문자로 시작해야 한다. 소문자로 시작하면 리액트가 컴포넌트가 아닌 DOM 태그로 인식한다.

const element = <div />; // DOM 태그

const element = <Welcome name="인제" />; 
// 만약 소문자면 DOM 태그로 인식한다.

 

Component 렌더링

• 컴포넌트는 붕어빵 틀이다.
• 실제로 화면에 보이려면 컴포넌트로부터 Element를 만들어야 한다.

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

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

• 리액트돔의 render 함수를 호출하여 리액트 엘리먼트를 실제 DOM에 업데이트한다.

 

컴포넌트 합성과 추출

컴포넌트 합성

• 여러 개 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것
• 복잡한 화면을 여러 개의 컴포넌트를 합쳐서 구성할 수 있다.

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

function App(props) {
	return (
    	<div>
            <Welcome name="Mike" />
            <Welcome name="Steve" />
            <Welcome name="Jane" />
        </div>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

 

컴포넌트 추출

• 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 것
• 잘 활용하면 재사용성이 증가한다.

 

function Comment(props) {
	return (
		<div className="comment">
			<div className="user-info">
				<img className="avatar"
					src={props.author.avatarUrl}
					alt={props.author.name}
				/>
				<div className="user-info-name">
					{props.author.name}
				</div>
			</div>
			<div className="comment-text">
					{props.text}
			</div>
			<div className="comment-date">
					{formatDate(props.date)}
			</div>
		</div>
	);
}

props = {
	author: {
		name: "홍길동",
		avatarUrl:"https://...",
	},
	text: "댓글입니다.",
	date: Date.now(),
}

위 컴포넌트를 추출해 보자

 

Avatar 컴포넌트 추출

function Avatar(props) {
	return (
		<img className="avatar"
			src={props.user.avatarUrl}
			alt={props.user.name}
		/>
	);
}


// 추출한 컴포넌트로 변경
function Comment(props) {
	return (
		<div className="comment">
			<div className="user-info">
				<Avatar user={props.author} />
				<div className="user-info-name">
					{props.author.name}
				</div>
			</div>
			<div className="comment-text">
					{props.text}
			</div>
			<div className="comment-date">
					{formatDate(props.date)}
			</div>
		</div>
	);
}

author > user 변경 : 재사용성을 위해 보편적인 의미로 변경, User-info 추출

function UserInfo(props) {
	return (
		<div className="user-info">
				<Avatar user={props.user} />
				<div className="user-info-name">
					{props.user.name}
				</div>
			</div>
	);
}


// 추출한 컴포넌트로 변경
function Comment(props) {
	return (
		<div className="comment">
			<UserInfo user={props.author} />
			<div className="comment-text">
					{props.text}
			</div>
			<div className="comment-date">
					{formatDate(props.date)}
			</div>
		</div>
	);
}

 

• 컴포넌트 추출은 기능단위와 재사용이 가능한 단위로 추출하는 것이 좋다.
• 재사용이 가능한 컴포넌트가 많을수록 개발 속도는 빨라진다.

 

인프런 처음 만난 리액트

[무료] 처음 만난 리액트(React) - 인프런 | 강의