React

React의 이벤트 처리 방식

DOM의 이벤트 처리 방식과 유사

• React에서 이벤트는 소문자 대산 카멜 케이스를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 전달한다.

---

HTML에서의 이벤트 처리 방식

<button onclick="handleEvent()">Event</button>

React의 이벤트 처리 방식

<button onClick={handleEvent}>Event</button>

---

state (상태)

• 살면서 변할 수 있는 값
• 컴포넌트의 사용 중 컴포넌트 내부에서 변화하는 값

props

• 외부로부터 전달 받은 값
• 컴포넌트의 속성을 의미한다.
• 읽기 전용
• 사용하는 방법
  1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의
  2. props를 이용하여 정의된 값과 속성을 전달
  3. 전달받은 props를 렌더링

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child />
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있다. 이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};