React props

1. 프로퍼티(properties, props)

상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용(단방향 데이터 흐름).

프로퍼티 값은 수정 불가능, 즉 읽기 전용 데이터.

1) 사용법

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

• 문자열 전달: 큰 따옴표(” “) 사용
• 숫자형, boolean 등의 값(문자열 외의 값) 전달: 중괄호( { } ) 사용

(1) 단일값 전달

• App.js

import React from 'react';
import Hello from "../src/Hello";

function App() {
    return (
            <Hello name="React"></Hello>//사용할 컴포넌트 props의 name 값을 "React"로
        );
}

export default App;

• Header.js

import React from 'react';

function Hello(props) {
    return <div>Hello, {props.name}</div>;// name 값을 조회하기 위해 props.name 이용.
}

export default Hello;

(2) 여러값 전달

• App.js

import React from 'react';
import Hello from '../src/Hello';

function App() {
    return (
            <Hello name="React" color="blue"/>
        );
}

export default App;

• Hello.js

import React from 'react';

function Hello(props){
    return(
            <div style={{ color: props.color }}>Hello, {props.name}</div>
        );
}

export default Hello;

이런 경우 객체값을 부를 때마다 매번 props에서 불러와야 함.

비구조화 할당 방식으로 코드를 바꾸면:

import React from 'react';

function Hello({name, color}){
    return(
            <div style={{ color: color }}>Hello, {name}</div>//동일하게 <div style={{ color }}Hello, {name}</div>
        );
}

export default Hello;

(3) 기본값 설정: defaultProps

• Hello.js

import React from 'react';

function Hello( {color, name} ) {
    return <div style={{ color }}>Hello, {name}</div>;
}

Hello.defaultProps = {
    name: 'noname'//defaultProps로 기본값 설정.
}

export default Hello;

(4) 컴포넌트 태그 내부의 값 조회: props.children

예를 들어, 스타일 정의된 파일 Wrapper.js를 App.js의 컴퍼넌트로 추가한다면,

• Wrapper.js

import React from "react";

function Wrapper() {
    const style = {
        border: '2px solid black',
        padding: 20
    };
    return <div style={style}><div>
}

export default Wrapper;

• App.js

import React from "react";
import Hello from "./Hello";
import Wrapper from "./Wrapper";

function App() {
    return (
        <Wrapper>
            <Hello name="React" color="blue"></Header>
        </Wraaper>
    );
}

export default App;

하지만 이렇게 작성된 Wrapper 컴포넌트를 App.js에 추가하면 Wrapper 태그 내부에서 작성한 값들을 출력 X

이럴 때, {children}을 사용하여 태그 내부를 보이도록 만들어주도록 한다.

따라서 Wrapper.js를 다음과 같이 수정한다:

• Wrapper.js

import React from 'react';

function Wrapper({ children }) {
    const style = {
        border: '2px solid black',
        padding: 20
    };

    return (
        <div style={style}>
            {children}
        </div>
    )
}

export default Wrapper;