[React] props

리액트의 Props에 대해서 정리해보겠습니다.

 

아래 리액트 홈페이지에서 해당 내용을 참고해보세요.

https://ko.reactjs.org/docs/components-and-props.html

Components and Props – React

 

props 는 properties의 줄임말입니다.

어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용합니다.

 

먼저, 'name' 이라는 값을 Hello컴포넌트에 전달해보겠습니다.

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

function App() {
    return (
      	<Hello name="hyemin" />
    );
}

export default App;

---

그리고 Hello컴포넌트에서 name 값을 사용해보겠습니다.

import React from 'react';

function Hello(props){
    return (
        <div>Welcome {props.name}</div>
    )
}

export default Hello;

결과화면

---

이번에는 color 값도 전달해보겠습니다.

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

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

export default App;

---

Hello 컴포넌트에서 color 값을 사용해보겠습니다.

import React from 'react';

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

export default Hello;

결과화면

위와 같이 props를 사용하여 name과 color 값을 사용해 보았습니다.

---

그런데 props.name, props.color 이런 식으로 사용하여 'props'로 반복되는 부분이 있기 때문에, 비구조화 할당을 통해 코드를 간략하게 정리해보겠습니다.

import React from 'react';

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

export default Hello;

위와 같이 함수의 파라미터에 funtion Hello({color, name}) 비구조화 할당을 사용해보았습니다.