[react 리액트] props 속성값 (Properties 프로퍼티)

1. props (Property 프로퍼티) 란?

1) 컴포넌트에 값을 전달할 때 사용

2) 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. (한쪽방향으로만 흐른다)

3) 하위 컴포넌트는 상위 컴포넌트의 프로퍼티를 수정할 수 없다. (하위 컴포넌트 입장에선 읽기전용 데이터)

 

e.g. 프로퍼티 (키 & 벨류로 구성)

{ 키1: 벨류1, 키2: 벨류2, 키: 185cm, 몸무게: 83kg }

 

 

 

2. 사용방법

1) 상위 컴포넌트 <App> 에서 하위 컴포넌트 <Header>에 title, price 값을 전달하고 싶다면

 

import './App.css';

import Header from './header.js';

import Nav from './Nav';

import Article from './Article';

function App() {

  return (

    <div>

      <Header title="핸델과 그랬대" price="21,500원"/>

      <Nav topics={topics}/>

      <Article title="Welcome" body="Hello Web"/>

    </div>

  )

}

 

 

 

2) <Header>에서 props라는 파라미터를 넣고 {props.원하는 키값} 중괄호를 사용하여 원하는 값을 가져온다.

※ 이름은 아무거나 써도 되며 이것이 곧 상위 컴포넌트의 Header를 가리킴

※ {중괄호}에 넣으면 문자열이 아닌 '표현식'으로 읽힘

function Header(props){

    return <header>

    <h1><a href="/">title: {props.title}</a></h1>

    <h2><a href="/">price: {props.price}</a></h2>

    </header>

}

export default Header;

 

 

 

3) style에 활용할 수도 있다.

<Header title="핸델과 그랬대" price="21,500원" color="red"/>

function Header(props){

    return <header>

    <h1 style={{color: props.color}}>title: {props.title}</h1>

    <h2><a href="/">price: {props.price}</a></h2>

    </header>

}

 

 

 

4) 여기서 인라인 스타일링은 {{}} 중괄호가 왜 두겹일까?

※ 리액트에서 변수는 {} 중괄호로 묶어줘야 한다. (1겹)

※ 스타일은 objext 타입이라 {} 중괄호로 묶음 (2겹)

※ 풀어쓰면 아래와 같음

function Header(props){

    const color1 = {color: props.color}

    return <header>

    <h1 style={color1}>title: {props.title}</h1>

    <h2><a href="/">price: {props.price}</a></h2>

    </header>

}

 

 

 

3. defaultProps 로 기본값을 설정하기

1) 하위 컴포넌트에 선언

컴포넌트이름.defaultProps = { 키: "벨류", 키: "벨류"...}

function Header(props){

    return <header>

    <h1><a href="/">title: {props.title}</a></h1>

    <h2><a href="/">price: {props.price}</a></h2>

    </header>

}

Header.defaultProps = {

    title: "타이틀 없음",

    price: "가격 미정"

}

export default Header;

 

 

 

2) 상위 컴포넌트에 프로퍼티가 없는 컴포넌트 생성하면 디폴트값으로 나옴 (일부도 가능)

function App() {

  return (

    <div>

      <Header title="핸델과 그랬대" price="21,500원"/>

      <Header/>

      <Nav topics={topics}/>

      <Article title="Welcome" body="Hello Web"/>

    </div>

  )

}

 

 

 

3) Header 부분 결과 화면

 

 

 

4. 자식 컴포넌트의 자식 컴포넌트로 props가 옮겨가면 어떻게 꺼내쓰지?

 

1) 부모 컴포넌트에서 자식 Data 컴포넌트로 정보 던짐

<Son name="정보", age=23>

 

 

 

2) 자식 컴포넌트에서 손자 컴포넌트로 정보 던짐 (data라는 이름으로 부모에게 받은 props를 손자에게 던짐)

Son(props){ <GrandSon data={props}> }

자식 컴포넌트에서 꺼내 쓰려면 console.log(props.name) // 정보

 

 

 

3) 손자 컴포넌트에서 꺼내쓰려면 props가 한꺼풀 더 입혀짐

GrandSon(props){...}

console.log(props.item.name) // 정보 (자식으로 부터 받은 값을 props로 묶고 그 props의 item에 name을 꺼낸다)

손자 컴포넌트에서 확인하면 props 안에 props가 또 있음

 

 

 

4) 결론

- props props props 로 가면 혼란스러우니 스테이지 마다 적절한 이름을 잘 붙인다.
- 또는 중간에 한번 다 까발려서 중복을 없앤다.