React로 무작정 개발하기 - 2

React로 무작정 개발하기 - 2

리스트 렌더링

import React, { Component } from 'react';

class Test extends Component {
  static defaultProps = {
    test: 'test'
  }

  listRenderingTest() {
      let arr = [0,1,2,3,4,5,6,7,8,9]
      let listTemplate = arr.map((item) => (
        <li key={item.toString()}>{ item }</li>
      ))

      return (
        <ul>{ listTemplate }</ul>
      )
  }

  render() {
    return (
      <div>
        { this.listRenderingTest() };
      </div>
    );
  }
}

export default Test;

코드를 먼저 보여주는게 훨씬 이해하기가 빠를 것 같습니다. 처음에 react를 개발하면서, 리스트렌더링 쪽을 보면서 아.. Vue가 엄청 편한 편이였다라는 생각이 들었습니다.

아마 Vue 사용자라면 같은 생각이 들 것이라고 봅니다

조금만 더 설명하자면, 일단 Array.map 함수를 이용하는게 기본으로 보입니다. 렌더링할 리스트의 map 함수를 사용하여 li tag를 각각의 리스트의 원소와 매핑을 해서 매핑을한 스트링을 리턴해줍니다. render()함수에서 해당 함수를 호출하여 렌더링을 해주는 방식입니다.
함수내에 li tag를 보면 key를 지정해주는 부분이 있는데, 이 key값을 사용하지 않으면 오류가 발생하게된다. 공식 문서에서는 이 key값을 꽤나 중요하게 설명하고 있는 것을 볼 수있다. 이 key 값들은 추가 검색 삭제 기능에 사용이되며, key가 변경되거나, 안정적인 값이 아니라면 react 전체의 성능저하와 state 관련된 문제가 발생할 수 있다고 한다. 자세한 내용은 https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318 이 사이트를 참고하면 좋을 것 같다.

---

조건부 렌더링

import React, { Component } from 'react';

class Test extends Component {
  static defaultProps = {
    test: 'test'
  }

  render() {
    return (
      <div>
        { 'test'==='test' && "조건부 렌더링" };
      </div>
    );
  }
}

export default Test;

조건부 렌더링은 조금 신선한면이 있다. render()함수 내의 표현식에서 { '조건' && "내용" } &&를 이용하여 렌더링 유무를 결정할 수 있다.