[React]리액트 - Elements, Components, Props

📝 Elements

엘리먼트란?
엘리먼트는 리액트 앱의 가장 작은 구성 블록이다.

DOM Elements VS React Elements

• 리액트 엘리먼트는 DOM 엘리먼트의 가상 정보이다. 
• DOM 엘리먼트는 리액트 엘리먼트보다 더 많은 정보를 담고 있어 무겁다.

---

Elements는 화면에서 보이는 것들을 기술한다.

const element = <h1>Hello, world</h1>;

• 위의 코드를 봐보자
  • 이 코드가 실행될 때 대입 연산자의 오른쪽 부분은 React의 CreateElement 함수를 사용하여 엘리먼트를 생성한다.
  • 리액트는 이러한 리엑트 엘리먼트를 통해 DOM 엘리먼트를 생성한다.

---

또한 리액트 Elements는
자바스크립트 객체 형태로 존재한다.

{
	type: 'button',
	props : {
    	className : 'bg-green',
		children : {
 			type : 'b',
			props : {
				children : 'Hello, element!'
			}
		}
	}
}

위의 엘리먼트가 실제로 렌더링 된다면 밑의 코드와 같은 DOM 엘리먼트가 된다.

<button class = 'bg-green'>
	<b>
		Hello, element!
	</b>
</button>

 

---

createElement 원문

해당 함수는 리액트 엘리먼트를 만드는 함수의 원문이다.

React.createElement(
	type,   //html 태그 이름이 문자열로 들어가거나 리액트 컴포넌트가 들어간다.
	[props],   //간단하게 엘리먼트의 속성
	[...children] //해당 엘리먼트의 자식 엘리먼트가 들어간다.
)

• type  : html 태그 이름이 문자열로 들어가거나 리액트 컴포넌트가 들어간다.
• props : color, style과 같은 애틀리뷰트의 상위 개념으로 간단하게 엘리먼트의 속성이라 생각하자
• children : 해당 엘리먼트의 자식 엘리먼트가 들어간다.

🚩실습 코드

function Button(props){
    return(
        <button className={'bg-${props.color}'}>
            <b>
                {props.children}
            </b>
        </button>
    )
}

function ConfirmDialog(props){
    return(
        <div>
            <p>내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color = 'green'>
                확인
            </Button>
        </div>
    )
}

CofirmDialog가 엘리먼트로 바뀌면 다음과 같이 변한다.

{
    type: 'div',
    props: {
        children [
            {
                type: 'p',
                props: {
                    children: '내용을 확인하셨으면 확인 버튼을 눌러주세요/'
                }
            },
            {
                type: 'button',
                props: {
                    className: 'bg-green',
                    children: {
                        type: 'b',
                        props: {
                            children: '확인'
                        }
                    }
                }
            }
        ]
    }
}

📝Elements의 특징

React Elements의 특징은
불변성이다.

• 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다.
  • 즉 생성 전 컴포넌트 상태에서는 바꿀 수 있지만 생성 후에는 바꿀 수 없다.
  • 만약 변경이 필요하다면 새로운 엘리먼트를 생성하여 바꾸면 된다.

🚩Elements 렌더링

엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해 렌더링 과정이 필요하다.

• 아래 예제를 보자

<div id='root'></div>

• 이 div 태그는 리액트에서 아주 중요한 역할을 한다.
  • 이 div 태그 안에 리액트 엘리먼트들이 렌더링 되며 이것을 루트 돔노드라고 부른다.

렌더링 하는 법

const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));

• 위의 코드는 먼저 엘리먼트를 하나 생성하고 생성된 엘리먼트를 루트 Div에 렌더링하는 코드이다.
  • 쉽게 말하면 리액트 가상 돔의 엘리먼트를 실제 돔 엘리먼트로 이동하는 과정이다.

fuction tick() {
     const element = (
         <div>
               <h1>안녕, 리액트!</h1>
               <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
         </div>
     );
     
     ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

• 해당 코드는 setInterval을 통해 현재 시간을 매초마다 갱신하는 코드이다.

📝 Components

레고를 조립하듯이 컴포넌트를 조립하여 하나의 페이지를 구성할 수 있다.

 

사실 자바 스크립트의 함수와 비슷하다.
차이점은 출력 대신 React element를 리턴한다.

더 쉽게 설명하면 자바의 객체지향과 비슷한 개념을 가지며
여기에 들어가는 속성들이 Props이다.

더 쉽게 그림으로보자

컴포넌트는 붕어빵을 만드는 틀이라고 할 수 있다. 붕어빵은 형태만 표현하기에 안에 들어가는 재료는 알 수 없다.

여기서 등장하는 것이 Props이다. Props에 따라 팥붕어빵인지 슈크림 붕어빵인지를 결정한다.

🚩 Props의 특징

• Read-Only
  • 값을 변경할 수 없다. - 엘리먼트는 불변하기 때문이다.
• 같은 Props가 들어오면 항상 같은 결과의 엘리먼트를 리턴해야한다.

🚩Props 사용법

JSX에선 해당 예제처럼 키-값을 이용해서 props를 컴포넌트에 넣을 수 있다.

function App(props) {
    return (
        <Profile
             name="소플",
             introduction="안녕하세요, 병웅입니다."
             viewCount={1500}
        /> //Profile 컴포넌트에 props를 넣음
    );
}

📝Component 만들기

Function Component

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

Class Component

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

 

사실상 함수와 똑같으며 매우 간단하기에 설명은 여기까지