[react] 리액트 컴포넌트 props로 데이터 전달

react props

 

리액트에서 컴포넌트간 데이터 전달 방법, 
props에 대하여 알아보겠습니다. 

 

props

부모컴포넌트에서 자식 컴포넌트로 데이터 전달 방식입니다. 

props 사용방법

//컴포넌트 태그내 <Fruit 자식 컴포넌트에서 사용할 props 이름 = {전달할 기존 state} />

 

예제1. 반복문을 컴포넌트 분리 class 방식

<li>태그의 반복되는 부분을 컴포넌트로 만듭니다. 
props를 이용하여 데이터를 전달합니다. 

부모 컴포넌트

import React, { Component } from 'react';
import Fruit from './Fruit';

class Map extends Component {
    state = {
        fruits: [
            {fruit: '🍉', color: 'green' },
            {fruit: '🍓', color: 'red' },
            {fruit: '🍊', color: 'orange' },
            {fruit: '🍋', color: 'yellow' },
            {fruit: '🍌', color: 'yellow' },
            {fruit: '🍍', color: 'red' },
            {fruit: '🥭', color: 'red' },
        ],
    }

    render() {
        return (
            <>
                <ul>
                    {this.state.fruits.map((item) => { return ( <Fruit propsData={item} /> ) })}
                </ul>
            </>
        )

    }
}

export default Map;

 

자식 컴포넌트

import React, { Component } from 'react';

class Fruit extends Component {


    render() {
        return (
            <li>{this.props.propsData.fruit} {this.props.propsData.color}</li>
        )
    }
}

export default Fruit;

 

화면결과

 

예제1-1. 반복문을 컴포넌트 분리 hooks 방식

부모 컴포넌트

import React, { useState } from 'react';
import Fruit from './Fruit';

const Map = () => {
    const [fruits, setFruits] = useState([
        {fruit: '🍉', color: 'green' },
        {fruit: '🍓', color: 'red' },
        {fruit: '🍊', color: 'orange' },
        {fruit: '🍋', color: 'yellow' },
        {fruit: '🍌', color: 'yellow' },
        {fruit: '🍍', color: 'red' },
        {fruit: '🥭', color: 'red' },
    ]);

    return (
        <>
            <ul>
                {fruits.map((item) => { return ( <Fruit propsData={item} /> ) })}
            </ul>
        </>
    )
}

export default Map;

 

자식 컴포넌트

import React, { Component } from 'react';

const Fruit = ({propsData}) => { //구조분해

    return (
        <li>{propsData.fruit} {propsData.color}</li>
    )   
}

export default Fruit;

 

자식 컴포넌트에서 props의 데이터 값을 변경하는 방법

부모 컴포넌트
· 데이터 관리는 최대한 부모 컴포넌트에 넣기 때문에, 변경할 데이터를 부모 컴포넌트 state에 추가해 줍니다. 

자식 컴포넌트
· props의 값을 바꾸지 않습니다. (이유: 부모에서 물려준 데이터이기 때문에 자식이 바꾸지 않도록 합니다.) 
· state를 추가로 만들어 props를 넣어줍니다.
· state를 바꿔줍니다.

예제1 hooks 방식

부모 컴포넌트

import React, { useState } from 'react';
import Fruit from './Fruit';

const Map = () => {
    const [fruits, setFruits] = useState([
        {fruit: '🍉', color: 'green', changed: 'grey' },
        {fruit: '🍓', color: 'red', changed: 'white' },
        {fruit: '🍊', color: 'orange', changed: 'pink' },
        {fruit: '🍋', color: 'yellow', changed: 'blue' },
        {fruit: '🍌', color: 'yellow', changed: 'green' },
        {fruit: '🍍', color: 'red', changed: 'gold' },
        {fruit: '🥭', color: 'red', changed: 'ivory'},
    ]);

    return (
        <>
            <ul>
                {fruits.map((item) => { return ( <Fruit propsData={item} /> ) })}
            </ul>
        </>
    )
}

export default Map;

 

자식 컴포넌트

import React, { Component, useState } from 'react';

const Fruit = ({propsData}) => { 
    const [changeColor, setChangeColor] = useState(propsData.color); //props를 state로 넣어줌
    const onClick = () => {
        setChangeColor(propsData.changed)
    }
    return (
        <li onClick={onClick}>{propsData.fruit} {changeColor}</li> //state
    )   
}

export default Fruit;

 

화면결과(클릭 전 / 클릭 후)