[React] Props 정리하기

Props란

리액트에서 컴포넌트에 지정한 속성들을 의미

어떠한 값을 컴포넌트에 전달할 때 props를 이용함

 

Props의 기본 사용법

App컴포넌트에서 Hello 컴포넌트를 사용할 때, name값과 color 값을 전달하고 싶다고 가정한다.

 

App.js

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

function App() {
	return (
    	<Hello name="react" color="red"/>
    )
}

export deafult App;

Hello.js

import React from 'react';

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

export default Hello;

props 내부의 값을 조회할 때 마다 props를 입력하고 있는데, 코드를 좀 더 간결하게 하기 위해 함수의 파라미터에서 비구조화 할당 문법을 사용할 수 있다.

 

Hello.js

import React from 'react';

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

export default Hello