[React] props

1. props란?

React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 넘겨주는 방식이다. React의 Data Flow는 단방향 형식으로 부모에게서 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다. 따라서, props에 있는 데이터들은 수정이 불가능하며 오직 안에 있는 값을 꺼내서 사용할 수만 있다.

 

2. props 사용 예시

2-1. Hello 컴포넌트에서 name 값 사용하기

🌠 App.js

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

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

export default App;

 

🌠 Hello.js

import React from "react";

function Hello(props) {
    return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

2-2. 여러 개의 props, 비구조화 할당

🌠 App.js

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

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

export default App;

 

🌠 Hello.js

import React from "react";

function Hello(props) {
    return <div style={{color: props.color}}>안녕하세요 {props.name}</div>
}

export default Hello;

 

🌠 비구조화 할당(구조 분해) 문법을 사용하여 작성한 Hello.js

import React from "react";

function Hello({color, name}) {
    return <div style={{color}}>안녕하세요 {name}</div>
}

export default Hello;

• 비구조화 할당 문법을 사용하면, props 내부의 값을 조회할 때 props. 를 입력하지 않고 코드를 간결하게 작성할 수 있다.

 

 

 

 

 

 

참고

- https://velog.io/@hytenic/React-props%EC%99%80-state-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

- https://react.vlpt.us/basic/05-props.html