JSX란?

Javascript XML

• 내장형 XML이라 HTML과 유사하게 정의된 구문을 사용
• JavaScript 언어의 확장
• JSX는 많은 개발자에게 친숙한 구문을 사용하여, 요소(구성요소)의 렌더링 구조를 지정하는 방법을 제공함
• 구성요소는 순수한 JavaScript로 작성할 수도 있음
• JSX는 PHP, XHP용 Facebook에서 만든 다른 확장 구문과 유사함
• React.js 에서 인기를 얻었으며 Vue.js, TypeScript 등 많은 곳에 사용됨
• JSX는 컴파일을 하기에 최적화 되고 빠름
• 그래서 컴파일을 하니 변환과정에서 오류가 있을 경우에는 빌드 시 오류를 일으킴
• 통상적으로 느끼기에 요소들을 랜더링해서 리턴 시점에 사전 정의된 HTML로 리턴함

1. Component & Props

함수 컴포넌트

• 컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수를 작성하는 것이다.
• 이 함수는 데이터를 가진 하나의 "props"(props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트다.
• 자바스크립트 함수이기 때문에 "함수 컴포넌트"라고 부른다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

클래스 컴포넌트

• React의 관점에서 볼 때 두 유형의 컴포넌트는 동일함

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
}

컴포넌트 렌더링

• React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있음

const element = <Welcome name="Sara" />;

• React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달하며, 이 객체를 'props'라고 함

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

// 위 예시의 실행 순서
1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

2. State & Life Cycle

• State는 컵 안에 들어있는 물이라고 생각할 수 있으며, 컴포넌트가 갖는 상태, 객체의 형태로 컴포넌트 내에서 보관하고 관리함
• State를 사용할 때는 class 컴포넌트로 작성해야 하며, 값 변경시는 setState 메서드 사용함
• state 값 변경하면(setState 사용) render() 함수가 다시 실행됨

클래스에 로컬 State 추가하기

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

• render() 메서드 안에 있는 this.props.date를 this.state.data로 변경

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

• 초기 this.state를 지정하는 class constructor를 추가

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {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')
);

Life Cycle 메서드를 클래스에 추가하기

• 컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트 또는 언마운트 될 때 일부 코드를 작동시킬 수 있음
• 이러한 메서드를 Life Cycle(생명주기) 라고 함
• Mount, Unmount 생명주기 메서드를 클래스에 추가하고 컴포넌트 state를 업데이트하기 위해 this.setState()를 사용함

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')
);

3. 이벤트 처리하기

• React의 이벤트는 캐멀 케이스 사용
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달

HTML와 React 비교

HTML
<button onclick="activateLasers()">
  Activate Lasers
</button>

React
<button onClick={activateLasers}>
  Activate Lasers
</button>