Components와 Props | React Docs

Components

• 개념적으로 컴포넌트는 JavaScript 함수와 유사
• "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환

함수 컴포넌트와 클래스 컴포넌트

함수 컴포넌트

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

• 위의 함수는 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환
  ⇒ 이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 함수 컴포넌트라고 호칭한다.

클래스 컴포넌트

• ES6 class를 사용하여 컴포넌트 정의
• React 관점에서 아래의 클래스 컴포넌트는 위의 함수 컴포넌트와 동일

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

컴포넌트 렌더링

이 전까지는 DOM 태그만을 사용해 React 엘리먼트는 나타냄

const element = <div />;

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element = <Welcome name="Sara" />;

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달
⇒ 이 객체를 props라고 한다.

// 예시: 페이지에서 "Hello, Sara"를 렌더링
function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));

const element = <Welcome name="Sara" />;

root.render(element);

• <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출
• React 는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
• Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
• React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

컴포넌트 네이밍

• 컴포넌트의 이름은 항상 대문자로 시작
• React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리

컴포넌트 합성

• 컴포넌트는 다른 컴포넌트를 참조할 수 있다.
• 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미
  ⇒ React 앱에서 모든 것들이 흔히 컴포넌트로 표현된다.

// Welcome 컴포넌트를 App 컴포넌트 내에서 여러 번 렌더링
function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

function App() {
	return (
		<div>
			<Welcome name="Sara" />
			<Welcome name="Lisa" />
			<Welcome name="Denniel" />
		</div>
	);
}

컴포넌트 추출

컴포넌트를 여러 개의 작은 컴포넌트로 나눌 수 있다.

• 아래의 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어 변경하기 어려울 수 있으며, 각 구성요소를 개별적으로 재사용하기 어렵다.

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

• Avatar 컴포넌트 추출
  • props 이름 변경 : author → user
    ⇒ props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장

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

• UserInfo 컴포넌트 추출

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

• Comment에 Avatar 컴포넌트, UserInfo 컴포넌트 적용

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>
	);
}

처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있다. 하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱을 작업할 때 두각을 나타낸다. UI 일부가 여러 번 사용되거나, UI 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트를 만드는 것이 좋다.

props는 읽기 전용입니다.

함수 컴포넌트, 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.

function sum(a, b) {
	return a + b;
}

• 순수 함수 : 위의 예시와 같이 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수
• 반면 자신의 입력값을 변경하는 함수는 순수 함수가 아니다.

function withdraw(account, amount) {
	account.total += amount;
}

• React는 매우 유연하지만 한 가지 엄격한 규칙이 존재
  ⇒ 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.