Components and Props

Components

리액트는 Component기반 (Component-based)의 구조

작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여 전체 페이지를 구성

 

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.

“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.

 

 

 

 

Props

property의 준말인 prop의 복수형이며 react에서 prop은 속성이라는 뜻으로 사용된다.

리액트 컴포넌의 속성이자 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.

 

Props의 특징

Read-Only (값을 변경 할 수 없다)

 

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 같은 결과를 보여줄 것

// Pure 함수
//입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴
function sum(a, b) {
    return a + b;
}

// Impure 함수
// 입력값(input)을 변경
function withdraw(account, amount) {
    account.total -= amount;
}

 

 

Props 사용법

JSX사용시

1. 컴포넌트에 Props 넣기 [Key : value]

function App(props) {
	return (
    	<Profile 
        	name="Coin"
          	introduction="안녕하세요, 코인입니다."
          	viewCount={1500} 
            // 문자열 이외에 정수, 변수, 다른 컴포넌트 등이 들어갈 경우 중괄호
            // 문자열도 중괄호 사용해도 무방
        />
    );
}
// javascript object로 변환된 props
{
	name: "Coin",
    introduction: "안녕하세요, 코인입니다.",
    viewCount: 1500
}

 

2. Props 안에 컴포넌트 넣기

function App() {
	return (
    	<Layout
        	width={1920} // decimal
          	height={1080} // decimal
          	header={<Header title="devjun의 블로그입니다." />} // react element
          	footer={<Footer />} // react element
        />
    );
}

 

JSX 미사용

// createElement함수
React.createElement(
	type,
  	[props],
  	[...children]
)
// 위 JSX 예제
// createElement함수의 Props에 자바스크립트 객체를 넣은 것
React.createElement(
    Profile,
    {
	name: "Coin",
    introduction: "안녕하세요, 코인입니다.",
    viewCount: 1500
    },
    null
);

---

Component 만들기

리액트에서 컴포넌트는 크게 2가지로 나뉜다.

Function Component

// 데이터를 가진 하나의 props 객체인자를 React 엘리먼트를 반환
// 이러한 컴포넌트는 JavaSript함수이기에 말 그대로 함수 컴포넌트라고 호칭한다.
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

Class Component

// ES6 class 사용한 클래스 컴포넌트
// React의 모든 클래스 컴포넌트는 React.Component를 상속받아 만든다.
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

React는 소문자로 시작하는 컴포넌트를 DOM태그로 인식하기 때문에

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

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

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

 

컴포넌트 렌더링

// DOM 태그를 사용한 element
const element = <div />;

// 사용자가 정의한 Component를 사용한 element
const element = <Welcome name="devjun" />;

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

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

---

Component 합성

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

// 컴포넌트 합성 예제 코드
// Welcome 컴포넌트 3개로 이루어진 App 컴포넌트
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>
}

function App(props) {
    return (
        <div>
            <Welcome name="아무개" />
            <Welcome name="아무개똥" />
            <Welcome name="아무개나리" />
        </div>
    )
}

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

 

Component 추출

큰 컴포넌트를 조각내는 것 /  재사용성 향상

기능 단위로 구분, 곧바로 재사용 가능한 형태로 추출하는 것이 좋다.

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} // author => user
            alt={props.user.name} // 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>
    )
}

 

---

 

Referenced By

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React