React Components와 Props

YEZI🎐·2022년 6월 16일

Props React components

React

목록 보기

8/29

Components란?

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눠, 각 조각을 개별적으로 관리할 수 있다.
사용자 컴포넌트는 항상 대문자 (React는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급)
React에서 정의하는 컴포넌트 종류는 크게 함수 컴포넌트와 클래스 컴포넌트 2가지가 있다.

함수 컴포넌트

src에 component폴더 생성

Header.js 생성 후 코드 작성

import React from 'react';
function Header(){
	return (
		<div>
			<header>
				Learn React
			</header>
		</div>
	);
}

export default Header;

App.js 에서 해당 컴포넌트 조합

import Header from './components/Header';
function App() {
	return (
		<div className="App">
			<Header />
		</div>
	);
}

export default App;

클래스 컴포넌트

src에 component폴더 생성

Header.js 생성 후 코드 작성

import React, { Component } from "react";
class Welcome extends React.Component {
    render() {
        return (
            <div>
                <header>
                    Learn React
                </header>
            </div>
        );
    }
}

export default Header;

App.js 에서 해당 컴포넌트 조합

import Header from './components/Header';
function App() {
	return (
		<div className="App">
			<Header />
		</div>
	);
}

export default App;

Props란?

프롭스, props(properties의 줄임말) 라고 한다.
props는 객체이다.
상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다. (단방향 데이터 흐름)
props는 (자식 입장에서) 읽기 전용이다.
순수 함수 : 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환

// App.js
import Header from './components/Header';
function App() {
	return (
		<div className="App">
			<Header title={'Learn React A'}/>	// props 넘기기
            <Header title={'Learn React B'}/>	// props 넘기기
            <Header title={'Learn React C'}/>	// props 넘기기
		</div>
	);
}

export default App;

// Header.js
import React from 'react';
function Header(props){			// props 받기
	return (
		<div>
			<header>
				{props.title}	// props.title 접근
			</header>
		</div>
	);
}

export default Header;

props의 기본 값

prop를 넘길 때 아무 값도 넘기지 않으면 default 값은 true다.

function App() {
  return (
    <div className="App">
      <Welcome withImg={true} />
      /* ↑ 같은 거 ↓ */
	  <Welcome withImg />
    </div>
  );
}

여러개의 props

여러개의 props가 있을 경우 디스트럭처링(Destructuring) 통해 좀 더 간결하게 작성할 수 있다.

// App.js
function App() {
	return (
		<Welcome firstName="Yeah" lastName="Zing" withImg />
	);
}
/* ↑ 같은 거 ↓ */
function App() {
    const info = {
		firstName: 'Yeah',
		lastName: 'Zing',
		withImg: true,
	}
	return (
		<Welcome {...info} />
	);
}

// Welcome.js
function Welcome(props) {
	return (
		<>
			{props.withImg && <img src="ghibli.png" alt="welcome Ghibli" />}
			{props.firstName} {props.lastName}
		</>
	);
}
/* ↑ 같은 거 ↓ */
function Welcome({withImg, firstName, lastName}) {
	return (
		<>
			{withImg && <img src="ghibli.png" alt="welcome Ghibli" />}
            {firstName} {lastName}
		</>
	);
}

props.children

props.children은 컴포넌트의 여는 태그와 닫는 태그 사이의 내용을 포함한다.

import Header from './components/Header';
function App() {
	return (
		<div className="App">
			<Header title={'Learn React A'}/>	// props.title
            <Header>Hello world<Header/>		// props.children
		</div>
	);
}

export default App;

props.children 활용법 #1
사용자 정의 컴포넌트가 일반적인 html 태그의 구조와 비슷할 때 props.children 활용한다.

일반적인 html 코드

<button onClick={() => alert('submit')}>제출하기</button>
<button onClick={() => alert('delete')}>삭제하기</button>
<button onClick={() => alert('add')}>추가하기</button>

사용자 정의 컴포넌트

// App.js
import Button from './components/Button';
function App() {
	return (
       <Button onClick={() => alert('submit')}>제출하기</Button>
       <Button onClick={() => alert('delete')}>삭제하기</Button>
       <Button onClick={() => alert('add')}>추가하기</Button>
	);
}

export default App;

// Header.js
import React from 'react';
export default function Button(props){			// props 받기
	return <button onClick={props.handleClick}>{props.children}</button>
}

props.children 활용법 #2
컴포넌트에 또 다른 컴포넌트를 전달해야 할 때 props.children 활용한다.

// App.js
import Welcome from './components/Welcome';
function App() {
	return (
       <Welcome>
     		<또 다른 사용자 정의 컴포넌트 />
       </Welcome>
	);
}

export default App;