React props

H_Chang·2023년 11월 1일

Components란?

컴포넌트는 "웹 페이지를 만드는 퍼즐 조각" 이라고 할수있다!
개발자는 컴포넌트 조각을 설계하고 만든 컴포넌트를 조합해서 사용자 인터페이스(user interface, UI)를 구축한다.
UI 조각인 컴포넌트를 모으면 전체 퍼즐 그림인 웹 페이지를 만들 수 있다.

const Vegetables = () => {
  return (
    <div>
      <h1>채소 종류</h1>
      <ul>
        <li>당근</li>
        <li>감자</li>
        <li>호박</li>
        <li>고구마</li>
        <li>토마토</li>
      </ul>
    </div>
  )
}

props란?

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체이다.
리액트는 사용자 정의 컴포넌트로 작성한 엘리먼트의 JSX 속성과 자식을 해당 컴포넌트에 단일 객체로 전달한다.
메인 상위 컴포넌트에서 어떤 데이터를 보낼 것인지를 정하면 이 데이터를 props를 통해 객체 형태로 하위 컴포넌트로 보낸다.

const data = [
{ id: 1, name: '당근' },
{ id: 2, name: '감자' },
{ id: 3, name: '호박' },
{ id: 4, name: '고구마' },
{ id: 5, name: '토마토' }
]

const Vegetables = ({ data }) => {
  return (
    <div>
      <h1>채소 종류</h1>
      <ul>
        {data.map(vegetable => {
          const { id, name } = data
          return <li key={id}>{name}</li>
        })}
      </ul>
    </div>
  )
}

위의 예시에서는 data라는 변수로 props의 데이터를 받았다.
props는 객체이므로 구조 분해(destrucuring) 방식을 이용해 데이터를 받는 변수를 중괄호({})로 감싸주었다.

Props 사용법 : 단방향 데이터 흐름

상위 컴포넌트에서 Props를 지정한다
하위 컴포넌트에서 받은 Props값을 렌더링해야 한다.

상위 컴포넌트에서 Props 지정하여 넘기기

아래 코드에서 App 컴포넌트가 MyComponent 컴포넌트를 포함한다.
App 컴포넌트에서 MyComponent에 props 값을 지정했다.
"propValue"라는 프로퍼티로 "Hello 리액트!"라는 값을 넘겨준다.
컴포넌트 태그 사이에 "Bye 리액트!" 라는 값을 주었다.

import React from "react";
import MyComponent from "./MyComponent";

function App() {
    return(
         <MyComponent propValue="Hello 리액트!">Bye 리액트!</MyComponent>
    );
}
export default App;

하위 컴포넌트에서 받아 Props 렌더링하기

MyComponent 컴포넌트에서 상위 컴포넌트로 부터 받은 Props 데이터를 뷰에 렌더링한다.

{props.propValue} : 상위 컴포넌트에서 props 값을 propsValue로 전달했기 때문에 {props.propValue} 로 나타낸다.
{props.children} : 리액트 컴포넌트 태그 사이에 내용을 보여주는 props 속성이다.
상위 컴포넌트에서 태그 사이에 작성한 "Bye 리액트!" 가 출력된다.

import React from "react";

function MyComponent(props) {
    return(
        <div>
            {props.propValue}, {props.children}
        </div>

    );
}
export default MyComponent;

Props 타입

props의 자료형은 자바스크립트의 자료형을 전부 사용 가능하다.

< 문자열 타입 프로퍼티 예시 >

<MyComponent name="Hello 리액트!"/>

프로퍼티 타입이 문자열인 경우, 프로퍼티 값을 표현할 때는 ("")를 사용한다.

< 문자열 이외 타입의 프로퍼티 예시 >

<MyComponent 
	boolProp= {true} //boolean
	arrProp= {['a','b','c']} //배열
	objProp= {{name:'코딩젤리', title:'헬로리액트!'}} //객체
	funcProp= {() => { alert('알림창'); }}  //함수 
/>