React Component란?
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
개념적으로 컴포넌트는 JavaScript 함수와 유사하다.
"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
리액트 컴포넌트를 표현하는 두 가지 방법
1. 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 훨씬 쉬운 표현을 해보면 아래와 같다.
function App () {
return <div>hello</div>
}- 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있다.
그리고 훨씬 쉽다. 우리 과정에서도 함수형 컴포넌트를 사용할 예정!
결론적으로 리액트 세계에서 말하는 component(블럭)는 함수이다. 누군가 와서 "컴포넌트를 만들어 보세요." 라고 한다면 우리는 html을 return 하는 함수를 만들면 된다!
Component 보는 방법
컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다.
컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있다.
컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있다. 컴포넌트 안에서 어떤 js코드를 작성하고 싶다면 여기에 작성하면 된다!
그리고 return을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX)을 작성할 수 있다. 여기에 작성한 html 코드와 값들이 화면에 보여진다.
💡주의!
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자여야 한다.
- 폴더는 소문자로 시작하는 camelcase로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 camelcase로 이름을 짓는다.
부모-자식 컴포넌트
컴포넌트는 다른 컴포넌트를 품을 수 있다.
이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.
// src/App.js
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />;
}
export default App;App.js 파일 안에서 Child라는 새로운 컴포넌트를 만들어 App 컴포넌트에서 마치 HTML 태그를 쓰듯이 넣었다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있다!
이렇게 만들어진 컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있다.
그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 우리는 앞으로 JSX 라고 부를 것이다.
*Rendering: 화면에 보여지게 하다.
