REACT | 처음 만난 리액트 - 5. Components and Props

1. Components와 Props의 정의

Components

리액트는 모든 페이지가 컴포넌트로 이루어져있고, 하나의 컴포넌트 또한 여러 컴포넌트를 조합하여 만들 수 있음

자바스크립트의 함수 형태와 유사

어떠한 속성들을 input으로 받아서 그 속성에 맞는 React elementf를 반환함

(React element는 가장 작은 빌딩 블록, 화면에 보이는 것을 기술함)

Component와 Element의 관계는 Class와 Instance 개념과 유사함

 

Props

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

Component의 속성 

e.g. Componenet가 붕어빵 틀이라면, Props는 속재료

 

2. Props의 특징

Read-Only 

-> 값을 변경할 수 없다.

컴포넌트를 엘리먼트로 변환하는 과정에서 속성이 변화한다면, 제대로된 엘리먼트를 생성할 수 없음

 

JavaScript 함수의 속성

- Pure한 함수

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

입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴

 

- Impure 함수

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

입력값을 변경

 

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

 

Props 사용법 (jsx사용)

// 1
// {} 안에는 자바스크립트 문법이 들어감
function App(props) {
	return (
    	<Profile
            name="소플"
            introduction="안녕하세요, 소플입니다."
            viewCount={1500} 
        />
    );
}

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

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

 

3. Component 만들기 및 렌더링

Function Component

모든 리액트 컴포넌트는 퓨어 함수와 같아야 함

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

- 위 예시처럼 간단하게 작성할 수 있다는 점이 함수형 컴포넌트의 장점이다.

 

Class Component

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

- React.Componenet를 상속받아서 새로운 자식 클래스를 생성

 

Component 이름

-> 항상 대문자로 시작해야함

리액트는 소문자로 시작하는 컴포넌트를 DOM 태그라고 생각하기 때문

// HTML div 태그로 인식
const element = <div />;

// Welcome이라는 리액트 Component로 인식
const element = <Welcome name="인제" />;

 

Component 렌더링

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

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

4. Component 합성과 추출

Component 합성

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

 

Component 추출

- 재사용성이 높아짐 -> 개발 속도 향상

// 기존 코드
function Comment(props) {
	retunr (
    	<div className="comment">
        	<div className="user-info">
            	<img className="avartar"
                	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>
    );
}

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

// Avatar Component 사용한 기존 코드
function Comment(props) {
	retunr (
    	<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>
    );
}

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

// UserInfo Component 사용한 기존 코드
function Comment(props) {
	retunr (
    	<div className="comment">
        	<UserInfo user={props.author} />
            <div className="comment-text">
            	{props.text}
            </div>            
            <div className="comment-date">
            	{formatDate(props.date)}
            </div>
        </div>
    );
}