23. React - 12 main concepts(Component and Pros)

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된  내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :))

앞서 

React의 필요성과 소개 및

React의 주요 개념 중

1. 기본틀,

2. JSX(JSX으로 Element생성:React.createElement()) ,

3. Element (생성된 Element를 DOM으로 rendering: ReactDOM.render())

에 대해서 알아보았다. 

 

이번에는

React의 주요 개념 중

4. Component와 Pros

에 대해서 정리해볼 것이다. 

1. React의 주요 개념들

4)  Component와 Pros

① Component란?

component는 props라는 입력을 받아서 React element를 return 하는 것으로,

개념적으로는 Javascript의 "함수"와 같은 형식으로 이해하면 쉽고, 쓰이는 형태는 "사용자 정의 HTML 태그"라고 생각하면 쉽다.

그런데, 말로만 한니까 나도 Element와 Component가 무슨 관계인지 헷갈리기 시작한다. 

 

리엑트의 공식문서에서는 "Element는 Component의 “구성 요소" 라고 설명한다. 그런데 이렇게 생각해버리면 Element가 Component의 작은 단위라는 느낌이든다. 그래서 이해하는데 더 어려웠던거 같다. simsimjae.tistory.com/449 이 블로그 글을 보고 

React의 Element란 Dom Node(p, span, div...)나 Component(class or function)에 대한 JSON 요약본이고, 

const DeleteAccount = () => ( <div> 
    <p>Are you sure?</p>
    <DangerButton>Yep</DangerButton>
    <Button color='blue'>Cancel</Button>
    </div>
);

// 출처: https://simsimjae.tistory.com/449 [104%]

이런 함수형 Component가 있을 때, Component는 props라는 input을 받아서 element를 리턴하는 함수 혹은 클래스이니까,

const DeleteAccount = () => ({
    type: 'div',
         props: { 
    		children: [{ 
              type: 'p',
              props: { 
                  children: 'Are you sure?'
              }
         	}, { 
              type: DangerButton,
              props: {
                  children: 'Yep'
              } 
            }, {
              type: Button, 
              props: { 
                  color: 'blue', 
                  children: 'Cancel'
               } 
            }] 
         }
     });

// 출처: https://simsimjae.tistory.com/449 [104%]

이런 React Element를 리턴한다. 

정리하면

• Component: 사용자 정의 HTML 태그처럼 쓰이기 위한 함수와 비슷한 개념
• Props: 함수의 인자와 비슷한 개념으로 Component에 주어짐
• Element: Dom Node(p, span, div...)나 Component(class or function)에 대한 JSON 요약본으로 Component가 return하는 것

② Components의 용도

Component를 사용하면 UI를 독립적으로 재사용 가능한 조각으로 분할하고, 각 조각을 분리해서 생각할 수 있다.

그리고 component를 사용하는 곳마다 해당 component의 변경사항을 하나씩 수정해주지 않아도 된다.

원래 Component 코드만 수정해주면 변경사항이 동시에 반영되므로 유지 보수가 매우 편리해진다. 

 

③  Component 정의 방법

1. 함수형 component

function Welcom(props){
	return <h1>Hello, {props.name} </h1>;
}

2. Class형 component

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

위의 두 방식은 동일한 컴포넌트이고, 두 방식은 여러 차이가 있다.

(이 부분은 자세히게 아직 공부하질 못해서 일단 참고한 글만 아래 <더보기>에 추가해 놓았음, 앞으로 공부하고 정리해야함)

함수형) 

• React에서 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수 형식으로 정의하는 것입니다.
• state나 lifecycle이 없는 일반 JavaScript 함수이므로 읽기 및 테스트가 수월합니다.
• 기본적으로는 state , lifecycle 등의 기능을 사용할 수 없습니다. 하지만 위 기능들을 함수형 컴포넌트에서도 사용할 수 있도록 Hooks가 **등장했습니다. **

class형)

• 클래스 컴포넌트는 ES6의 class 키워드를 사용하여 만들어진 컴포넌트입니다.

• 클래스 컴포넌트의 경우 몇 가지 특징이 있는데요. 예제를 통해 살펴 보겠습니다.

  1. extends 키워드를 통해, React.Component 에 대한 상속을 작성해야 합니다.

     이를 통해 컴포넌트에 React.Component 의 기능에 대한 액세스 권한을 제공합니다.

  2. 클래스 컴포넌트의 경우,  render()메소드가 필수적으로 필요합니다. 이를 통해 HTML을 리턴합니다.

  3. Constructor 는 class에서 states나 props를 사용하기 위해필요한 생성자입니다.

     메서드를 바인딩하거나 state를 바꾸는 작업이 없다면, 해당 컴포넌트에서는 구현하지 않아도 됩니다.

  4. super(props) 는 부모 클래스 생성자(리액트에서는 React.Component)를 가리킵니다.

     props를 상속받아서 class 에서도 사용할 수 있게 도와줍니다. (constructor에서 super 호출 전에 this 를 사용할 수 없는 규칙이 있습니다.)

더 공부해야 할 reference)

함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

Dan Abramov - 왜 super(props) 를 명시해 줘야 하는가?

React - Functional Component의 장점, Hook

 

④ Rendering Component 

앞선 포스팅에서 Element는 DOM 태그를 사용해서 나타낼 수도 있지만, Component로 작성한 "사용자 정의 태그"를 사용할 수도 있다. 

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

const element = <Welcome name="Sara" />; //Component로 작성한 "사용자 정의 태그"를 사용

1. Component로 작성한 "사용자 정의 태그"와 속성으로 주어지는 props를 사용해서 Element를 만들고 이를 DOM에 적용시켜보자. 

function Welcome(props) { //3. 그러면 React는 {name: 'Sara'}를 props인 Welcome 컴포넌트는
  return <h1>Hello, {props.name}</h1>; //4. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
}

const element = <Welcome name="Sara" />; //2. React는 Welcome Component를 name="Sara" 정보와 함께 부른다. 

ReactDOM.render( //1. ReactDOM.render에서 element는
  element,
  document.getElementById('root') 
); // 5. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트. 

2. props 값만 달라진 같은 Component를 여러번 사용해서 Element를 만들고 이를 DOM에 적용시켜보자. 

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

function App(){
	return (
    	<div>
            <welcome name='Sara'/>
            <welcome name='Grace'/>
        </div>
     )
}         

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

※ 여기서 주의 할 점은,  

JSX를 사용할 때 규칙 - 반드시하나의 element로 모든 element가 감싸야 한다. 를 지켜주어야 한다는 것이다. 

그래서 <welcome name='Sara'/> 와 <welcome name='Grace'/>를 <div>로 감싼 뒤 리턴 해 준 것이다. 

그리고, name='Sara', name='Grace'에 해당하는 props는 읽기 전용값으로, 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 된다. 

그래서 React에서는 State를 통해 동적인 UI를 구현할 수 있게 한다.

State에 대해서는 다음 포스트에서 정리할 것이다.

 

⑤ Extracting Components

앞서 component 용도에서 "Component를 사용하면 UI를 독립적으로 재사용 가능한 조각으로 분할하고, 각 조각을 분리해서 생각할 수 있다."라고 했다. 그러니까.. 하나의 컴포넌트도 고유의 기능을 하는 더 작은 compoenent로 분리할 수 있다. 

예를 들어, 

이렇게 Extract하면

Avatar compoenent는 아래와 같이 되고, 

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

UserInfo component는 이렇게 된다. 

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

그래서 최종 Comment component는

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

이렇게 더 단순해 질 수 있다!

 

지금까지 

React의 주요 개념 중

4. Component와 Pros

에 대해서 정리해 보았다.  

 

다음은 

React의 주요 개념 중

5. State & Lifecycle

에 대해서 정리해볼 것이다. 

Reference

ko.reactjs.org/docs/components-and-props.html

Components and Props – React

simsimjae

React의 Components, Elements, Instances란?