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;