React - loop, conditional

반복문

• react jsx에서는 for문을 사용할 수 없기에, map을 사용한다. (2차원 배열, 배열 내 객체 적극적으로 사용 권장)
• 성능과 가독성을 올리기 위해 Component를 분리하고 props를 사용한다.
• key라는 고유한 값을 지정하고 { }안에 들어있는 값이 중복되면 안된다. (성능 최적화)
• map의 두번째 인자인 index를 key값으로 지정해주면 성능 최적화에 문제가 발생할 수 있다.(요소가 추가되기만 하는 배열인 경우 index를 key값으로 설정해도 괜찮음.)

Class형 예시
class Exer extends Component {
  render() {
    return [
      {name: 'lee', blood: 'a'},
      {name: 'park', blood: 'b'},
      {name: 'lee', blood: 'ab'},
    ].map((v) => {
      return (
        // <li key={v.name}> 라고 쓰면 값이 중복되기 때문에 [0].name == [2].name // 고유한 값으로 지정
        <li key={v.name + v.blood}>
          <b>{v.name}</b>-{v.blood}
        </li>
      );
    });
  }
}

컴포넌트 분리

• 위 코드의 반복문 부분을 컴포넌트로 분리하고 싶다면 매개변수, 인자를 연결시켜준다.
  - app.js(메인 컴포넌트)에서 try.js(분리하고 싶은 컴포넌트)에게 props를 물려주는 방식
  • 부모컴포넌트는 자식컴포넌트에게 props를 물려줄 수 있다.

// 분리하고 싶은 부분
<li key={v.blood}>
  <b>{v.name}</b>-{v.blood}
</li>;

// 변경 후 
// app.js
<Try key={v.blood} v={v} i={i} />;

// Try.js 생성 후 props로 연결한다.
class Try extends Component {
  render() {
    return (
      <li>
        <b>{this.props.v}</b> -{this.props.i}
      </li>
    );
  }
}

조건문

• 조건문 또한 react jsx에서는 if문을 사용할 수 없기에 삼항연산자를 사용한다.

  const rednerAverage = () => {
    return result.length === 0 ? null : ( // 삼항연산자 사용
      <>
        <div>평균 시간: {(result.reduce((a, c) => a + c) / result.length).toFixed(1)}ms</div> // 이렇게 식이 길어지는 경우 함수로 따로 분리해주는게 좋다.
        <button onClick={onReset}>Reset</button> 
      </>