2월 6일 여정 29일차이다.

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

function App () {
	return <div>hello</div>
}

리액트에서의 컴포넌트란 무엇일까?

오늘의 Today I Learned

problem

리액트를 배우면서 컴포넌트에 대해 의문이 생겼다.
그리하여 컴포넌트의 개념에 대해 자세히 들여다볼까 한다.

try

항해99의 문서를 한번 살펴보았다. 물론 그 외에 구글에서도 정보를 찾게 되었다.

solve

컴포넌트란 결국 UI를 재사용이 가능한 개별적인 여러조각으로 나누는 것을 말한다. 이러한 컴포넌트는 자바스크립트의 함수와 매우 유사하다.
컴포넌트를 표현하는 방식은 2가지 방법이 있다.

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)

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

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

1. 함수형 컴포넌트이다.

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

2. 클래스형 컴포넌트이다.

위의 2가지 모두 기능상으로는 동일하다. 하지만 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있다.

// src/App.js
import React from "react";

function Child() {
  return <div>나는 아들입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

위의 코드를 한번 보자.
App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들었다. 그리고 Child 컴포넌트를 App 컴포넌트에서 마치 HTML 태그 쓰듯이 넣었다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있다.

위와 같이 코드를 작성하면 화면에 '나는 아들입니다'가 출력될 것이다. 그 이유는 파일에서 보내진 컴포넌트는 App 컴포넌트이기 때문에 App 컴포넌트가 화면에 보이게 되는 것이다. 하지만 App 컴포넌트는 Child 컴포넌트를 자식으로 삼고 있기 때문에 결국 자식 컴포넌트에 있는 '나는 아들입니다.'라는 문장이 출력 되게 된다.

knew

컴포넌트라는 것은 결국 재사용이 가능하게끔 UI를 여러 조각으로 분리한 것이다.

마지막으로

리액트를 정리하면서 기본적인 지식이 쌓여가고 있다.