JSX를 Babel이 컴파일 하는 방법

JSX는 코드를 작성하는 개발자에겐 직관적이고 편리한 것이 사실이지만, 브라우저가 바로 읽을 수는 없다. 이 때 등장하는 것이 JSX를 JavaScript 언어로 컴파일 해주는 Babel인데, Babel이 JSX를 어떻게 컴파일하는지 예시를 통해 React가 실제 동작하는 원리를 파악해보자.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

기본적으로 바벨은 React.createElement() 메서드를 통해 엘리먼트를 생성하며, 각 인자에는 HTML TAG의 이름, 요소의 속성을 담은 객체, 태그 안에 들어갈 컨텐츠 순으로 들어간다. React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하고, 다음과 같은 객체를 생성한다. 생성되는 객체의 구조를 눈여겨봐두자.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

컴포넌트를 생성하는 방법

React의 컴포넌트는 JavaScript 함수를 작성하거나 ES6 문법인 class를 사용해 컴포넌트를 작성할 수 있다.

함수 컴포넌트

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

말 그대로 JavaScript 함수이기 때문에 함수 컴포넌트라 호칭한다. function 선언 없이 화살표 함수로도 작성 가능하다.

클래스 컴포넌트

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

ES6에서 추가된 class 키워드를 사용해 컴포넌트를 생성해서 클래스 컴포넌트라 호칭한다. React.Component를 상속받아서 작성하고, render메서드에 실제 생성될 내용을 작성한다. 이 때, 전달받을 props가 있다면 this를 사용해 전달받을 수 있다.

클래스 컴포넌트에서의 props와 state

상위 컴포넌트에서 props를 전달하면 React.Component에서 해당 내용을 추가하여 상속하게 한다. 클래스 컴포넌트에서 React.Component를 상속시켜야 하는 이유.

state

클래스 컴포넌트에서 state를 사용하려면 기본적인 constructor를 추가하고 그 안에 state라는 속성을 추가해야 한다. 속성의 값은 객체로, 객체 내의 키가 state, 값은 초기 값이 된다. 이 때, super()를 이용해 상속받을 부모인 React.Component의 props를 상속받아야 한다.

class Welcome extends React.Component {
	constructor(props){
		super(props);
		this.state = {hello: "hello"}
	}
  render() {
    return <h1>Hello, {this.state.hello}</h1>;
  }
}

상태를 변경하려면 클래스에 새로운 메소드를 만들고 그 안에 this.setState()를 사용하면 된다. 메서드 안에는 생성할 때 처럼 객체 형태로 작성하면 된다.

class Welcome extends React.Component {
	constructor(props){
		super(props);
		this.state = {hello: "hello"}
	}
  render() {
    return <h1 onClick={() => {this.world()}>{props.name}, {this.state.hello}</h1>;
  }
	hi(){
		this.setState({
			hello: "hi"
		})
	}
}

const Welcome = ({name}) => {
  const [hello, setHello] = useState("hello");

  const world = () => {
    setHello("world");
  }

  return (
    <h1 onClick={world}>{name}, {hello}</h1>
  )
}

Uploaded by N2T

티스토리툴바

Class Component 톺아보기