컴포넌트와 props (1)

컴포넌트

리액트에서의 함수. props를 입력받아 앨리먼트를 반환한다.
말 그대로 함수처럼 생각하면 된다.

javascript

import React from "react";

function Clock(props) {
    return (
        <div>
            <h1>안녕, 리액트!</h1>
            <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

export default Clock;

javascript

import Clock from './ch04/clock';
const root = ReactDOM.createRoot(document.getElementById('root'));

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );  
}, 1000);

즉, <Clock /> 이 바로 컴포넌트라는 이야기.

근데, <> (angle brackets) 안에 들어가는 것은 html의 태그 아닌가?

→ JSX에서 <> (angle brackets) 안에 들어가는 것은 태그처럼 보이지만, 실제로는 React 엘리먼트를 생성하는 문법.

태그 vs 컴포넌트

태그는 소문자로 시작하는 반면, 컴포넌트는 대문자로 시작.
둘 다 어쨌든 가상 DOM의 일부로 취급됨.

컴포넌트의 특징

컴포넌트 안에 컴포넌트가 들어갈 수 있다.
하나의 컴포넌트로 여러 개의 엘리먼트를 찍을 수 있다
- 객체지향의 개념과 비슷. 재사용성의 강화.

props

properties의 약자. 컴포넌트에 들어가는 파라미터.

javascript

import React from 'react';

function App(props) {
    const firstNumber = props.firstNumber + 1;
    const secondNumber = props.secondNumber * 2;
    return (
        <div>
            <h1>첫 번째 숫자 (원래 숫자 + 1): {firstNumber}</h1>
            <h1>두 번째 숫자 (원래 숫자 * 2): {secondNumber}</h1>
        </div>
    );
}

props 사용법

javascript

function App(props){
	return (
		<Layout
			width={2560}
			height={1440}
			header={
				<Header title="안녕하세요" />
			}
			footer={
				<Footer />
			}
		/>
	);
}

props에 값을 넣으려면 무조건 {}로 감싸야 한다.