[React-Basic-Hooks] 5. React Component 이해

[beecomci]

React Component 이해 #

• 재사용성을 높여주고 기능별 단위를 만들 수 있게 해줌
• f(props) -> reactElement

Component 구현 2가지 방법

1. Function Component

   • props 넘겨서 react element return

     
     // with destructuring & arrow function
     const Greeting = ({ name = '아무개' }) => (
     <div>
     안녕하세요~ <b>{name}</b>님
     </div>
     );

   // 사용 예시 (react component를 인스턴스화) () => ;

2. Class Component : Extends React.Component(or React.PureComponent)

   import { Component } from 'react'
   
   class GreetingClassComponent extends Component {
   render() { // 내부 render 메소드 사용
     return <div>안녕하세요~ <b>{this.props.name}</b>님</div>; // this.props : class 내부 변수로 존재
   }
   }
   
   // 사용 예시 
   () => <GreetingClassComponent name="유진"/>;

props

• react element의 attribute를 react component에 전달하는 경우
• user-defined Component에 전달되는 jsx attribute
• single object
  • 여러개 attribute는 1개의 객체로 전달됨
• props는 read-only
  • Component 안에서 변경 X
  • 변경하고 싶다면 copy해서 변경
• props의 기본값은 true
  • value를 안넘기면 true

    // string template으로 쓴 이유 -> js 표현식에 그냥 {test} 를 넣으면 값이 true, false, null, undefined 등은 React에서 노출 X 
    const TestDefaultProp = ({ test }) => <div>{`${test}`}</div>;

• 사용자 정의 Component는 대문자로 시작
• String으로 넘길때는 ""로 바로 전달 - html unescape 됨
  • ""를 사용하는 경우, "<3" -> <3 으로 html decode 되서 노출

• ...(spread operator) 사용하여 prop 전달 가능 -> component가 커질 수 있기 때문에 spread operator만 봐서는 어떤 값인지 알 수 없으므로 사용 지양

  // 넘기는 props가 많을 경우에는 data 그대로 받고 Component 내부에서 객체 풀어줌 
  const Greeting = ({ data }) => {
  const { name, message = '반가워', test = 'test' } = data;
  
  return (
    <div>
      안녕하세요~ <b>{name}</b>님
    </div>
  )
  };
  
  // 사용 예시
  const data = { name: '아무개', message: '환영해' };
  () => <Greeting data={data} />

• Array로 React element를 반환하는 경우 key prop을 꼭 추가한다
  • Virtual DOM에서 변경될 때 array 변경시 일일히 모두 비교하기 어렵기 때문에 key 가 추가되어야하는 이유
  • key는 해당 array 사이에서 unique 해야 함 (전체 말고 array 내에서만)
  • 배열 요소의 최상위 element에 key prop을 할당해야 함
  • array의 index는 최후의 수단으로 key에 사용 -> 사용 지양
  • key 사용 이유: diff algorithm

    // key 없으면 아래와 같은 warning 발생
    // Warning: Each child in a list should have a unique "key" prop.
    {teams.map((team) => <TeamRow key={team.name} team={team} />)}

• 태그 내부의 값은 props.children으로 전달 #
  • open & closing 태그 내의 값은 props.chilren으로

All React components must act like pure functions with respect to their props.

• 순수 함수 : 동일한 param이 들어가면 결과가 항상 동일해야 함
• 같은 props가 들어가면 동일한 rendering이 되어야 함

Children

• 아래와 같은 경우 children이 될 수 있음

  • String literal
  • JSX Children

    <MyContainer>
    <MyFirstComponent />
    <MySecondComponent />
    안녕
    </MyContainer>

  • Array of React elements
  • Javascript expression
  • Function as children #

    
    // 함수를 children으로 넘기고, Component에서 children을 받아서 함수 실행
    // Calls the children callback numTimes to produce a repeated component
    function Repeat(props) {
    let items = [];
    for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
    }
    return <div>{items}</div>;
    }

  function ListOfTenThings() { return (

  {(index) =>
  This is item {index} in the list
  }

  ); }

  - 참고: [render-prop](https://reactjs.org/docs/render-props.html)
  ```javascript
  // hooks이 생기면서 사용은 점점 안하는 듯
  <DataProvider render={data => (
    <h1>Hello {data.target}</h1>
  )}/>

  • Booleans, null, undefined 는 무시됨

  • falsy 값 중 0은 render 되므로 conditional render 할 때 주의

    const ConditionalChildren = () => {
    const showGreeting = false
    const list = [] 
    // 기존 js에서는 hasList가 0이면 아무것도 노출이 안될텐데 React에서는 hasList가 0인 falsy한 값이면서 표현식 내부면 0 그대로 노출됨
    // const hasList = list.length
    // boolean 타입으로 변경
    const hasList = list.length > 0
    
    return (
    <>
      {showGreeting && <div>반가워요!</div>}
      {hasList && list.map(item => <div key={item}>{item}</div>)} 
    </>
    )
    };

  • 값을 그대로 render 하고 싶다면 stringify 할 것 or string literal

[beecomci]

Reconciliation

React는 2가지를 이용해서 DOM 트리 탐색 알고리즘의 복잡도를 O(n)으로 줄임

1. 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.
2. 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.

1. 부모 노드 타입이 다르면 자식 노드는 비교하지 않는다.

• React는 DOM 트리를 level-by-level로 탐색
• 부모 노드 타입이 바뀌는 순간 그 아래 모든 자식 노드들은 굳이 탐색할 필요 없이 언마운트되고 그 state도 사라지며 재렌더링됨
• Component나 노드 타입이 바뀌지 않는다면 최대한 렌더링하지 않는 방향으로 최소한의 변경 사항만 업데이트
  • Virtual DOM : 실제 DOM을 생성할 때 필요한 정보들을 담은 객체
  • 업데이트 할 내용이 생기면 Virtual DOM 내부의 프로퍼티만 수정 후 모든 노드에 걸친 업데이트가 끝나면 실제 DOM으로 렌더링 시도

2. 노드에 key를 부여하면 일일이 탐색하지 않고 접근 가능하다.

• React는 자식 노드들을 비교할 때 이전 목록과 다음 목록의 순서에 따라 업데이트 여부 결정

  
  // 마지막 <li>third</li> 만 추가되면 됨
  <ul>
  <li>first</li>
  <li>second</li>
  </ul>

• first
• second
• third

// 리스트 맨 앞에 노드가 추가되어 전체적인 순서가 달라져서 모든 자식 노드들을 변경해야함 -> 리소스 낭비

• Duke
• Villanova

• Connecticut
• Duke
• Villanova

- 그래서 반복되는 노드에 `key`를 부여 
- 그러면 노드 순서가 바뀌어도 기존 노드들은 그대로 두고 바뀐 노드만 렌더링 가능, 서브 트리 내에서만 unique하면 되고 전역에서 unique할 필요 X
- 배열의 index를 key로 사용하는 것은 지양 -> 항목의 순서가 바뀔 경우, key도 바뀌고 그 결과로 component의 state가 의도대로 동작하지 않을 수 있음