[REACT] 리액트 컴포넌트와 props 알아보기

컴포넌트 Component?

 

컴포넌트(Component)란 구성 요소 혹은 기계의 부품이라는 뜻입니다.

웹 페이지 혹은 애플리케이션은 프로필, 이름, 게시글, 댓글, 좋아요 버튼 등 다양한 요소로 구성되어 있습니다.

이러한 각 요소들을 컴포넌트라고 부르며 웹 페이지나 애플리케이션의 디자인 및 기능을 구성하는 기본 단위로 생각할 수 있습니다.

 

https://www.patterns.dev/posts/reactjs

 

위의 사진처럼 컴포넌트는 사용자 인터페이스(UI)를 만드는 데 사용되며, 독립적이고 재사용 가능한 요소들입니다.

마치 레고 블록을 사용하여 다양한 구조물을 만드는 것과 비슷합니다.

각 블록은 독립적이지만 다른 블록과 결합해서 다양한 구조물을 만드는 것처럼, 웹 페이지나 애플리케이션 또한 컴포넌트를 조합하여 전체 기능을 구축합니다.

 

Props(Properties)?

 

Props는 Properties의 줄임말로 컴포넌트 간에 정보를 전달하는 데 사용되는 객체입니다.

부모 컴포넌트로부터 자식 컴포넌트에 값을 전달하며, 자바스크립트의 매개변수와 비슷한 개념입니다.

이를 통해 컴포넌트는 동적으로 변경되는 값을 표시할 수 있고, 다양한 상황에 재사용될 수 있습니다.

다만 자바스크립트의 매개변수는 함수 내에서 변경될 수 있지만, 전달받은 props는 직접 수정할 수 없습니다.

 

컴포넌트와 props의 작성

 

import React from 'react'
import ReactDOM from 'react-dom'

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

const element = <Hello name='leeyanggoo' />  //name 속성값 전달

ReactDOM.render(element, document.getElementById('root'))

export default Hello

// Hello, leeyanggoo

 

1. 컴포넌트 이름의 첫 글자는 대문자로 시작해야 합니다.

이것은 리액트에서 사용자가 만든 컴포넌트와 일반 HTML 태그를 구분하기 위한 규칙입니다.

예제는 "function Hello"와 같이 대문자로 시작하는 컴포넌트 이름을 사용하고 있습니다.

 

2. JSX 문법 내에서 자바스크립트 표현식을 사용하려면 중괄호{ }를 사용해야 합니다.

예를 들어 props의 값을 출력하려면 {props.name}처럼 중괄호로 감싸서 사용해야 합니다.

변수 element에 name 키에 할당한 leeyanggoo 값을 컴포넌트 Hello에 props로 전달합니다.

자바스크립트에서 객체 데이터를 불러오듯 props.name으로 해당 값을 불러옵니다.

 

3. JSX에서는 모든 태그를 닫아야 합니다.

HTML에서 <img> 태그는 닫지 않지만, 리액트의 경우 <img />와 같이 사용해야 합니다.

예제는 컴포넌트 Hello에 name 속성값을 전달하는 element 변수의 끝에 />를 사용해 닫고 있습니다.

 

객체와 함수를 사용한 경우

 

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props){
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.text}</div>
      <div>{props.authorName}</div>
      <div>{props.authorUrl}</div>
    </div>
  )
}

const name = {
  name : "leeyanggoo",
  text : "Hello",
  author : {
    name : "baby",
    url : "naver.com"
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name = {name.name} text = {name.text} authorName = {name.author.name} authorUrl = {name.author.url} />);

 

1. 컴포넌트 Hello는 props라는 객체를 매개변수로 받습니다.

이 객체는 name, text, authorName, authorUrl 속성을 포함하며, 컴포넌트에서 이를 사용하여 정보를 표시합니다.

 

2. name이라는 객체는 name, text, author 속성을 가지고 있으며, author 속성은 다시 name과 url 속성을 가집니다.

 

3. root.render() 함수를 호출하여 Hello 컴포넌트를 렌더링합니다.

이때 name 객체에서 각 속성값을 추출하여 Hello 컴포넌트의 props로 전달합니다.

자바스크립트의 객체 데이터를 불러오는 표현식을 사용하며, 중괄호를 사용합니다.