리액트는 컴포넌트들로 구성되어 있습니다. 즉, 컴포넌트를 이용해 UI를 설계합니다. 컴포넌트의 기능은 단순한 템플릿 이상입니다. 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 주고, 컴포넌트가 화면에서 나타날 때, 사라질 때, 변화가 일어날 때를 각각 나누어 작업을 처리할 수도 있습니다.

컴포넌트 선언

컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 클래스형 컴포넌트고, 또 다른 하나는 함수형 컴포넌트입니다. 초창기에는 클래스형 컴포넌트를 사용했지만 리액트 16.8 버전부터는 함수형 컴포넌트에 Hook을 지원해 현재 대부분 함수형 컴포넌트를 사용합니다.

클래스형 컴포넌트

import { Component } from 'react';

class App extents Coponent {
	render() {
    	const name = 'react';
      	return <div className="react">{name}</div>;
    }
}

export default App;

클래스형 컴포넌트에는 render 함수가 꼭 있어야 하고, 그 안에서 JSX를 반환해야 합니다.

함수형 컴포넌트

function App {
  	const name = 'react';
  	return <div className="react">{name}</div>;
}

export default App;

function 키워드 대신 화살표 함수를 이용할 수도 있습니다.

const App = () => {
  	const name = 'react';
  	return <div className="react">{name}</div>;
}

export default App;

둘의 차이점은 클래스형 컴포넌트만 state 기능과 라이프 사이클 기능을 사용할 수 있다는 것이었으나, 16.8 버전 이후 Hook 도입으로 함수형 컴포넌트도 이 기능들을 사용할 수 있게 되었습니다.

리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hook을 사용하도록 권장하고 있습니다.

JSX

JSX는 자바스크립트의 확장 문법이며 HTML과 매우 비슷하게 생겼습니다. 순수 자바스크립트를 이용하는 것보다 더 편하게 UI를 작성할 수 있습니다.

JSX 문법은 다음과 같습니다.

function App() {
	return {
    	<div>
      		Hello <b>React</b>
      	<div>
    };
}

JSX 는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 다음과 같이 일반 자바스크립트 형태의 코드로 변환됩니다.

function App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null, "React"));
}

props

props는 properties를 줄인 표현으로, 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props는 부모 컴포넌트에서 설정할 수 있습니다.

다음은 부모 컴포넌트입니다. 자식 컴포넌트에 name이라는 props를 설정했습니다.

import ChildComponent form './ChildComponent';

const ParentComponent = () => {
	return <ChildComponent name="홍길동" />;
}

export default ParentComponent;

다음은 자식 컴포넌트입니다. 부모에게서 받은 props값을 사용해봅니다.

const ChildComponent = (props) => {
	return <div> 내 이름은 {props.name}<div>;
}

export default ParentComponent;

props는 부모 컴포넌트에서 설정하는 값이라 자식 컴포넌트는 props를 읽기만 할 수 있습니다. props를 바꾸려면 부모컴포넌트에서 바꾸어 주어야 합니다.

state

state는 상태값, 즉 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 리액트에는 두 가지 종류의 state가 있스빈다. 하나는 클래스형 컴포넌트가 지니고 있는 state, 다른 하나는 함수형 컴포넌트에서 useState라는 Hook 함수를 통해 사용하는 state입니다.

useState를 사용하여 state를 사용해보겠습니다.

import { useState } from 'react';

const MyComponent = () => {
	const [message, setMessage] = useState('');
  	const onClick = () => {
    	setMessage('안녕하세요')
    };
  
  	return (
    	<div>
      		<button onClick={onClick}> 클릭! </button>
			<h1>{message}</h1>
      	<div>
    );
};

export default MyComponent;

useState 함수의 인자에는 상태의 초기값을 넣어줍니다. 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태이고, 두 번째 원소는 상태를 바꾸어 주는 함수 입니다. 이 함수를 세터(Setter)함수라고도 부릅니다. 현재 상태를 변경할 때는 무조건 세터 함수를 통해서만 바꿔야합니다.

위의 예제를 보면 세터 함수 setMessage를 통해서 현재 상태 message를 변경해 주고 있습니다.