리액트 21~25강 정리

import 와 require 의 비교

 

require : 노드의 모듈 시스템

 

**exports되는 것이 객체나 배열이면 구조 분해 할 수 있다.

 

// import 사용법
import React from 'react';
import ReactDom from 'react-dom'
import { hot } from 'react'hot-loader/root';

// require 사용법
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');

 

리액트에서 li태그를 사용할 경우 key를 사용해야한다. 

key를 사용해야해서 리액트에서 반복문이 사용하기 살짝 어렵다.

이 key는 고유한 값으로 사용해야한다.

key로 index를 할 경우 나중에 성능에 문제가 생긴다.

( 키정하는게 쓸데없이 귀찮은 경우가 많음..)

 

컴포넌트화를 해주는 이유 : 가독성, 재사용성, 성능 최적화

 

반복문 단위로 주로 컴포넌트화를 함.

 

props

 

컴포넌트로 값을 전달하기 위해서 

{this.fruits.map((v, i) => {
  return (
  	<Try value={v} index={i} />
  ); // return 생략가능   
})}

전달한 값을 받기 위해서

 

<li key={this.props.value.fruit}>
  <b>{this.props.value.fruit}</b> - {this.props.index.i}
  <div>컨텐츠</div>
  <div>컨텐츠1</div>
  <div>컨텐츠2</div>
  <div>컨텐츠3</div>
  <div>컨텐츠4</div>
</li>

props 부모컴포넌트가 자식컴포넌트한테 물려주는 것(유산이라고 생각하세요)

 

react의 jsx에서의 주석은

 /* */