[React] Props component

Components와 Props – React

공식 문서

1. Components와 Props의 정의

React는 Component기반의 구조

• 리액트에서는 모든페이지가 component로 구성되어 있고
• 하나의 component는 다른 component로 구성되어 있기도 함

→ 마치 레고 블록을 조립하듯 component들을 모아서 개발

• 위 사진에서의 A,B와 같이 여러 component를 반복하여 하나의 페이지를 구성
• 하나의 컴포넌트를 반복적으로 사용하여 개발시간와 유지보수 비용을 줄일 수 있음

1-1. component의 구조

• 자바스크립트의 함수와 유사함
  • 입력을 받아 출력하는 구조
• 그러나 다른 점이 있는데 그것은 Props를 입력받아 element를 출력하는 것
  • 객체 지향 class(component) / instance(element) 개념과 유사

• 어떠한 속성들을 입력받아 그에 맞는 React element 생성

 

 

2. Props의 특징 및 사용법

• props는 prop이 여러개인 것을 의미함
• prop은 property(속성)를 줄여쓴 것
• 즉, React component의 속성
• Props는 붕어빵의 재료

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

---

2-2. props 특징

• props는 읽을 수만 있다 → 즉 값을 변경 할 수 없다.
  • element를 생성하는 와중에 바뀐다면 element 생성하기 어려움
• 변경하고 싶다면 새로운 값을 component에 전달하여 새로운 element 생성 해야 함

모든 React 컴포넌트는 그들의 props에 관해서 pure함수와 같은 역할을 해야 한다.

→모든 React 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줘야 함

 

 

3. Component 만들기 및 렌더링

• 초기에는 Class component를 주로 활용하였지만 점차 편의성을 위해 함수 component가 더 대중적으로 활용됨

3-1. Function Component

• component를 일종의 함수처럼 생각

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

3-2. Class Component

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

• 함수 Component와 가장 큰 차이점은 React.Component을 상속 받아 만들어짐

🔵  컴포넌트의 이름

• Component 이름은 항상 대문자로 시작해야 한다.
  • 소문자로 시작하는 Component는 DOM태그로 인식하기 때문

3-3. Component 렌더링

const element = <Welcome name="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);

이 예시에서는 다음과 같은 일들이 일어납니다.

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

 

 

4. Component 합성과 추출

4-1. component 합성

• component는 자신의 출력에 다른 컴포넌트를 참조할 수 있음
• 예시
  • Welcome을 여러 번 렌더링하는 App 컴포넌트 생성

  function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  
  function App() {
    return (
      <div>
        <Welcome name="Sara" />
        <Welcome name="Cahal" />
        <Welcome name="Edite" />
      </div>
    );
  

4-2. component 추출

• 복잡한 component를 쪼개서 여러개로 나누는 것
• 큰 component에서 일부를 추출해서 새로운 component 생성
  • 재사용성 ⬆️ 개발 속도 ⬆️
• 재사용 가능한 component를 많이 갖고 있을수록 개발 속도가 빨라진다.

---

• 원래 코드

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

1. Avatar

• 추출한 코드

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

• 기존 코드에 적용

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <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>
  );
}

• 비교

- 이전
<img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        
- 이후
<Avatar user={props.author} />

1. UserInfo

• 추출한 코드

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-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>
  );
}

• 비교

- 이전
<div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>

- 이후
<UserInfo user={props.author} />