[TIL] React Component

컴포넌트 개념 이해하기

컴포넌트를 통해 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 독립적으로 생각할 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
"props"라고 하는 임의의 입력을 받은 후, 어떤게 화면에 나타나야 하는지를 설명하는 React 요소를 반환합니다.
[출처] React 공식문서

컴포넌트를 표현하는 두가지 방법

1. 함수형 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수로 작성하는 것이다.

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

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

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

2. 클래스형 컴포넌트

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

두 가지 모두 React 관점에서 보면 동일하다.
공식문서에서는 함수형 컴포넌트를 권장한다.

👉 결론적으로 리액트 세계에서말하는 컴포넌트는 HTML을 리턴하는함수 이다.

컴포넌트 보는 방법

컴포넌트를 볼 때 영역을 나누어서 보면 조금 더 편하다.
컴포넌트 밖에서는 내가 필요한 파일을 import하거나 export default 를 통해 내보낸다.
그리고 return 하는 부분에는 JSX(JavaScript XML)을 작성할 수 있다. 여기에 작성한 html코드와 값들이 화면에 보여진다.

📌 주의사항

• 컴포넌트를 만들 때 가장 첫 글자는 반드시 대문자로 만든다!
  • ex) <div /> 는 DOM 태그를 나타내지만 <Welcome />은 컴포넌트를 나타내며 스코프에 Welcome을 필요로 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성 (ex. components)
• 컴포넌트를 만드는 파일은 파스칼케이스로 작성 (ex. App.js)

컴포넌트 렌더링

이전에는 DOM 태그를 나타내는 React 요소만 있었다.

const element = <div />;

그러나, 요소에 유저가 정의한 컴포넌트를 나타낼 수도 있다.

const element = <Welcome name="Sara" />;

React가 유저가 정의한 컴포넌트를 나태나는 요소를 볼 때 JSX 속성을 이 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 부른다.

예를 들어 이 코드는 "Hello, Sara"를 페이지에 렌더링한다.

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

const element = <Welcome name="Sara" />; // props.name == "Sara"
ReactDOM.render(
  element,
  document.getElementById('root')
);

1. <Welcome name="Sara" /> 요소로 ReactDOM.render() 를 호출한다.
2. React가 {name: 'Sara'} 를 props로 하여 Welcome 컴포넌트를 호출한다.
3. Welcome 컴포넌트가 그 결과로 <h1>Hello, Sara</h1> 요소를 반환한다.
4. React DOM이 <h1>Hello, Sara</h1> 과 일치하도록 DOM을 효율적으로 업데이트한다.

컴포넌트 결합

컴포넌트는 출력될 때 다른 컴포넌트를 참조할 수 있다.
이를 통해 모든 세부 레벨에서 동일한 컴포넌트 추상화를 사용할 수 있다.
React 앱에서 버튼, 폼, 다이얼로그, 스크린 같은 것들은 모두 일반적으로 컴포넌트로 표현된다.
예를 들어, Welcome을 여러번 렌더링하는 App 컴포넌트를 만들 수 있다.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

이를 부모-자식 관계로 표현하면 다음과 같다.

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

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

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

export default App;