---

Components

Components는 React 앱에서 독립적인 기능을 수행하는 단위 모듈

React는 컴포넌트를 통해 UI를 독립적인 여러 조각으로 나누어 재사용성을 높인다.

컴포넌트는 JavaScript의 Function과 개념적으로 유사하며 이 둘의 가장 큰 차이점은 전달, 반환하는 데이터이다.

Function과 다르게 Components는 props라 불리는 데이터를 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 포함하여 반환한다.

---

Function 컴포넌트(Hook) & Class 컴포넌트

컴포넌트를 정의하는 방법은 크게 함수형(Hook), _클래스형_2가지로 구분된다.

이전에는 클래스형으로 컴포넌트를 작성했지만 현재에는 간결성을 위해 대부분 함수형으로 컴포넌트를 작성한다.

React 공식문서에서도 함수형으로 컴포넌트를 작성하는것을 권장

함수형 컴포넌트는 이름 그대로 JavaScript 함수로 작성하기 때문에 “함수 컴포넌트”라고 불른다.

작성하는 방법은 다음과 같다.

function PrintHello(props) {
  return <h1>{props.text}</h1>;
}

위의 예제는 속성을 나타내는 데이터를 props 객체 인자로 전달받아 React 엘리먼트를 반환한다.

또한 해당 코드를 클래스 컴포넌트로 정의하면 다음과 같다.

class PrintHello extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

위에서 작성한 두 유형의 컴포넌트는 화면에 동일한 결과를 출력함은 물론 React 관점에서도 개념적으로 동일하다.

Props

Props는 읽기 전용 데이터이기 때문에 함수형, 클래스형 컴포넌트에서 모두 Props를 수정하면 안된다.

아래 코드의 add함수는 언제나 같은 입력값에 대해 동일한 결과를 반환한다. 이러한 함수를 순수 함수라고 한다.

function add(x, y) {
  return x + y;
}

반면에 아래 코드 add함수는 입력값을 변경하기 때문에 순수 함수가 아닌 비순수 함수이다.

function add(x, y) {
  x.num -= y;
}

React에서는 컴포넌트가 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

---

Components Rendering

React 엘리먼트는 DOM 태그 이외에 사용자 정의 컴포넌트도 사용할 수 있다.

이 때 사용자 정의 컴포넌트명은 대문자로 작성해야한다. 왜냐하면 React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문이다.

const element = <h1 />;
const element = <PrintHello text="Hello" />;

React는 사용자 정의 컴포넌트를 사용하여 반환한 엘리먼트를 확인하면 JSX 속성, 자식을 해당 컴포넌트에 단일 객체로 전달한다, 이 객체가 위에서 언급한 props이다.

아래 코드는 화면에 “Hello”를 Rendering한다.

function PrintHello(props) {
  return <h1>{props.text}</h1>;
}

const element = <PrintHello text="Hello" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

위의 예시는 다음과 순서로 코드가 실행된다.

1. <PrintHello text="Hello" /> 엘리먼트로 ReactDOM.render를 호출한다.

2. React는 {text: 'Hello'}를 props로 하여 PrintHello 컴포넌트를 호출한다.

3. PrintHello 컴포넌트는 결과적으로 <h1>Hello</h1> 엘리먼트를 반환한다.

4. React DOM은 <h1>Hello</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다.

---

Components Compositing

위에서 컴포넌트는 UI를 독립적인 여러 조각으로 나누어 재사용성을 높인다고 설명했다.

즉 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있음을 의미한다.

아래 코드는 PrintText를 여러 번 렌더링하여 App 컴포넌트를 만든다.

function PrintText(props) {
  return <h1>{props.text}</h1>;
}

function App() {
  return (
    <div>
      <PrintText text="Hello" />
      <PrintText text="My name is" />
      <PrintText text="Mirrer!!" />
    </div>
  );
}

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

---

Function 컴포넌트(Hook)를 Class 컴포넌트로 변환

함수형 컴포넌트를 클래스형 컴포넌트로 변환하는 방법은 다음과 같다.

1. React.Component를 확장하는 동일한 이름의 ES6 class를 생성한다.

2. render()라고 불리는 빈 메서드를 추가한다.

3. 함수의 내용을 render() 메서드 안으로 이동시킨다.

4. render()내용 안에 있는 props를 this.props로 변경한다.

5. 남아있는 빈 함수 선언을 삭제합니다.

// 함수형
function PrintText(props) {
  return <h1>{props.text}</h1>;
}

// 클래스형
class PrintText extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;    
  }
}

---

참고 자료

React 공식문서
웹 게임을 만들며 배우는 React - 제로초