2024.08.08

React

• 리액트 컴포넌트의 개념에 대해 이해합니다.
• 부모-자식 컴포넌트의 개념에 대해 이해합니다.
• JSX 문법을 학습하고 사용해봅니다.

 

컴포넌트(Components)

그래밍에 있어 재사용이 가능한 각각의 독립된 모듈

 

(출처: https://velog.io/@iamsung33)

 

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고,

각 조각을 개별적으로 살펴볼 수 있습니다.

 

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.

 

"props"라고 하는 임의의 입력을 받은 후,

화면에 어떻게 표시되는지를 기술하는 Reat 엘리먼트를 반환합니다.

 

 

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

- 함수형 컴포넌트

// 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>
 }
}

 

 

 

리액트 세계에서 말하는 컴포넌트(블럭)는

즉 함수입니다.

 

→ html처럼 생긴 jsx를 return하는 함수

 

 

 

 

컴포넌트 보는 방법)

(출처: TeamSparta)

 

 

주의사항)

 

컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 합니다.

폴더는 소문자로 시작하는 카멜케이스로 작성하고, 

컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스 이름을 짓습니다.

 

부모 - 자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있습니다.

이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트,

다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트 라고 부릅니다.

 

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

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

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

export default App;

컴포넌트는 마치 HTML 태그를 쓰듯이 사용하여 화면에 보여지게 할 수 있습니다

html 태그 사용하듯이 코드 작성하는 방식 →  JSX

화면에 보여지게 하다 →  Rendering