React 공홈 문서 정리(1)

JSX

Javascript 를 확장한 문법
React element 를 생성함
Babel 은 JSX 를 React.createElement() 를 호출로 컴파일 함

const element = (<h1 className="greeting"> a </h1>);

과

const elemetn = React.createElement(
'h1',
{className: 'greeing'},
'a'
)

은 동일함

위처럼 생성한 react element 는 ReactDOM.render() 를 통해 렌더링

DOM 에 react element 렌더링

React 로 구현한 것은 일반적으로 하나의 root dom 노드가 있음
react 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render() 로 전달하면 됨

const element = <h1>Hello, world</h1>
ReactDOM.render(element, document.getElementById('root'));

함수 컴포넌트

function foo(props) {
 return <h1>Hi {props.name} </h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
 element,
 document.getElementById('root')
)

컴포넌트 이름은 항상 대문자로 시작해야 한다. (React 는 소문자로 시작하는 컴포넌트는 DOM 태그로 처리함)

클래스 컴포넌트

render() 함수안에 함수컴포넌트의 return 문 작성

아래는 시간을 표시해주는 코드다.
괜찮은 예제코드라서 가져왔다.

setState 로 state 가 변할때마다 class 내의 render 함수 호출 -> react는 달라진 부분만 찾아내서 dom 업데이트 함

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

Key

React 가 어떤 항목을 변경, 추가 , 삭제 할지 식별해 주는 것을 도와줌.
key는 엘리먼트에 안정적인 고유성을 부여하기 위해, 배열 내부의 엘리먼트에 지정해야 함
(고유성 부여하는 거니까 같은개 여러개 있는 배열의 특징을 가진 엘리먼트에 지정해야 된다는 것 같음)

key 는 주변 배열 context 에서만 의미가 있음 -> 주변 배열이 예시로 봤을 때, 다른 요소들을 감싸고 있는 component를 말하는 듯 하다.
보통 map() 함수 내부에 있는 element 에 key 를 넣어주는게 좋다고 한다.
key는 배열안에서만 고유하면 된다. 전체 범위에서 고유할 필요는 없다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

해당 항목을 고유하게 식별할 수 있는 문자열을 key 로 설정하는 것이 좋음
대부분의 경우 데이터의 id 를 key 로 쓴다 함

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

렌더링 한 항목에 대한 안정적인 id 가 없다면 최후의 수단으로 인덱스를 key 로 사용
항목의 순서가 바뀔 수 있는 경우 key 에 인덱스 사용은 권장하지 않음. (성능 저하 및 state 와 관련된 문제 발생할 수 있음)
리스트 항목에 명시적으로 key 를 지정하지 않으면 React는 인덱스를 key 로 사용함