[React] Component 생성 및 렌더링, 합성과 추출

Components and Props

1. Component 만들기

---

Component ( in React )

1. Function Component
2. Class Component
   

 

Function Component

• 모든 리액트 컴포넌트 ➡ Pure 함수
  ✅ 모든 리액트 컴포넌트 ➡ 일종의 함수

 

📌 예제1. function Component

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

• 간단한 코드가 장점

 

Class Component

📌예제2. Class Component

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

• Class Component는 React.Component를 상속(Extends) 받아서 만든다.
• 상속(Extends) : 한 Class의 변수들과 함수들을 상속받아서 새로운 자식 클래스를 만드는 방법

 

Component 이름 짓기

• Component의 이름은 항상 대문자로 시작해야 한다.
• 소문자 ➡ DOM 태그로 인식 (div, h1 등)

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

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

2. Component Rendering

---

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

const element = <Welcome name="인제" />
# 사용자가 정의한 Component를 사용한 element

 

📌예제3. Component Rendering

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

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

 

3. Component 합성과 추출

---

• 여러 컴포넌트를 합쳐 하나의 컴포넌트를 만들 수 있다.
•  Component 안에 다른 Component를 쓸 수 있다.

✅ 복잡한 화면을 여러개의 Component로 나눠서 구현 가능

 

📌예제4. Welcome 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>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );

App 컴포넌트의 최종 구조

Component 추출

• 복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 나눌 수 있다.
• 장점 : 재사용성 증대, 개발 속도 향상

 

📌예제5-1. Avatar 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(),
}

function Avatar (props) {
  return (
    <img className="avatar"
        src={props.user.avatarUrl}
        alt={props.user.name}
    />
  )
  // 보편적인 단어 사용 (user) ➡ 재사용성 고려
}

 

📌예제5-2. 예제5-1 수정

function Comment(props) {
  <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>
}

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

function Comment(props) {
  <div className="comment">
    <UserInfo user={props.author} />
    <!-- UserInfo Component 추출하여 사용 -->
    <div className="comment-text">
      {props.text}
    </div>
    <div className="comment-date">
      {formatDate(props.date)}
    </div>
  </div>
}

Comment 컴포넌트의 최종 구조

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션5. Components and Props
• 리액트 공식문서