Components & Props

soma·2024년 4월 3일

Props React ReactElements react_components

React

목록 보기

5/10

Components

프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈 (붕어빵 틀)

** React는 컴포넌트 기반의 구조(Component-Based)
** React는 모든 페이지가 컴포넌트로 구성되었고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음

Props(입력) -> React component -> React element(출력)
- React component는 입력(Props)을 받아서 정해진 출력(React elements)을 내뱉는다는 의미
- 즉, React component는 어떠한 속성들을 입력으로 받아서 속성에 맞춰 화면에 나타날 엘리먼트를 생성하여 리턴해주는 역할

** React element(각각의 붕어빵들) : React APP을 구성하는 가장 작은 빌딩 블록들로 JavaScript 객체로 존재하며 화면에 보이는 것을 기술함
** 즉, React element를 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워줌

All React components must act like pure functions with respect to their props.
(모든 React component는 그들의 Props에 관해서 Pure 함수같은 역할을 해야 한다.
=> 모든 React component는 Props를 직접 바꿀 수없고, 같은 Props에 대해선 항상 같은 결과를 보여줘야 한다.)

** pure 함수 : 같은 입력 값에 대해서는 항상 같은 결과를 보여줘야 함

컴포넌트의 장점

✅ 반복적인 개발이 줄어든다.
✅ 오류를 고치기 쉽다.
✅ 일을 쉽게 나눌 수 있다.

Props

Props (Property)

React component의 속성, 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 (붕어빵의 속재료)

React component에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 component의 속재료

Props의 특징

✅ Read-Only

읽기 전용 => 값을 변경할 수 없음
- Props의 값은 React component가 element를 생성하기 위해 사용하는 값으로 변경할 수 없음
다른 props 값으로 element를 생성하려면 새로운 값을 component에 전달하여 새로 element를 생성

✅ children

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

---

import Menu from './Button';

function App() {
  return (
    <div>
      <Button>확인</Button>
    </div>
  );
}

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담김
JSX 문법으로 컴포넌트를 작성할 때 어떤 정보를 전달할 때는 일반적인 props의 속성값을 주로 활용하나,
화면에 보여질 모습을 조금 더 직관적인 코드로 작성하고자 할 때 children 값을 활용할 수 있음

React Component 종류

React에서 Component는 Function Component와 Class Component로 나뉨

Class Component

class Welcome extends React.Component {
  render() {
    return <h1>안녕! {this.props.name}</h1>
  }
}

함수 컴포넌트와의 차이
React의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만듦

** 상속 ? 객체 지향 프로그래밍에서 나오는 개념으로 한 클래스의 변수들과 함수들을 상속받아 새로운 자식 클래스를 만드는 방법

Function Component

function Welcome(props) {
  return <h1>안녕! {props.name}</h1>
}

함수 컴포넌트의 장점은 간단한 코드!

Component 만들기 및 렌더링

✔ Component를 이름은 항상 "대문자"로 시작!

// HTML div 태그로 인식
// DOM 태그를 사용한 element
const element = <div />;

//Welcome이라는 React component로 인식
//사용자가 정의한 Component를 사용한 element
const element = <Welcome name="song" />;

✔ Component를 렌더링하기

* Component는 붕어빵 틀의 역학, 실제로 화면에 렌더링되는 것은 아님
* 붕어빵 틀을 통해 나오는  붕어빵(엘리먼트)이 실제로 화면에 보이게(렌더링) 하기 위해선 컴포넌트로부터 엘리먼트를 만들어야 함

// 1. Welcome 함수 컴포넌트 선언
function Welcome(props) {
// 3.React는 Welcome 컴포넌트에 {name:"song"} props를 넣어서 호출하고  4. 그 결과로 리액트 엘리먼트가 생성됨
  return <h1>안녕! {props.name}</h1>;
}

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

// 2. Welcome name="song" 값을 가진 element를 파라미터로 해서 ReactDOM.render 함수를 호출
ReactDOM.render(
  element,
  docuement.getElementById('root');
);

// 5. 4에서 생성된 엘리먼트는 최종적으로 ReactDOM을 통해 실제 DOM에 업데이트되고 브라우저를 통해 볼 수 있게 됨

Component 합성

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

function App(props) {
  return (
  	<div>
    	<Welcome name="song" />
    	<Welcome name="som" />
    	<Welcome name="soma" />
    </div>
  )
}

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