[React.js] 부모에서 자식, 자식에서 부모 값 전달하는 방법 props, function

[ React 관련 글 List ]

2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 함수에서 사용하는Hooks State. useState

2021/01/17 - [내가 공부하는것/JavaScript] - [React.js] 리액트에서 화면전환 애니메이션 ( react-transition-group )

  부모에서 자식으로 값 전달하는 방법

 

 

props 란?

 - 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 수단.

 - 하위 컴포넌트에서 상위 컴포넌트가 전해준 값에 접근을 할 수 있게 해준다.

 - 단, 하위 컴포넌트에서 상위 컴포넌트로 값을 전달할 수는 없다.

 

props 사용법

 - 클래스형 컴포넌트와 함수형 컴포넌트 둘 다 똑같은 방식으로 진행하면 된다.

 

:: 상위 컴포넌트 ( 부모 컴포넌트 ) ::

import React , {useState} from 'react';

import Btn from '../components/question/Btn';

const Question = () => {
	const [textValue , setTextValue] = useState("클릭하세요");
    
	return (
		<div>
			<Btn value={ text } />
		</div>
	);
};

export default Question;

:: 하위 컴포넌트 ( 자식 컴포넌트 ) ::

import React from 'react';

const Btn = (props) => {
	return (
		<div>
			{ props.textValue }
		</div>
	);
};

export default Btn;

 

이런식으로 사용하면 됩니다.

만약, 클래스형 컴포넌트에서 props를 사용하려면?

<div> { this.props.textValue } </div>

 

위와같은 형식으로 사용을 해주시면 됩니다.

 

 

  자식에서 부모로 값을 전달하는 방법

 

 

 

함수 전달 방법

 

 

import React , {useState} from 'react';

import Btn from '../components/question/Btn';

const Question = () => {
	const [textValue , setTextValue] = useState("클릭하세요");
    
    const getTextValue = (text) => {
    	setTextValue(text);
    }
    
	return (
		<div>
			<Btn
				value={ text }
				getTextValue={getTextValue} 
			/>
			{ textValue }
		</div>
	);
};

export default Question;

:: 하위 컴포넌트 ( 자식 컴포넌트 ) ::

import React from 'react';

const Btn = (props) => {
	const sendTextValue = () => {
    	props.getTextValue('자식에서 부모로 값 보내기!');
    }

	return (
    		<div>
        		{ props.textValue }
                <a onClick={ sendTextValue } > 상위컴포넌트로 값 보내기 </a>
       	 	</div>
	);
};

export default Btn;

 

무슨원리인데요?

 

해당 함수를 작동시키는 코드가 있어야 함수가 작동하는것은 모두 알고 계실겁니다.

 부모 컴포넌트에 getTextValue(text) 라는 함수를 선언을 한 뒤, 자식 컴포넌트에 props를 통하여 해당 함수가 부모 컴포넌트에 있다고 알려줍니다.

 

 그 후 자식 컴포넌트에서는 getTextValue(text) 라는 함수가 부모컴포넌트에 있다는 사실을 알고 있으니 이 함수를 작동시키기 위해 sendTextValue() 라는 함수를 만들어 주고 해당 함수를 작동시키기 위해 "상위컴포넌트로 값 보내기" 텍스트를 클릭하면 sendTextValue() 함수가 작동하게끔 onClick 이벤트를 걸어줍니다.

 

 onClick이벤트와 함께 sendTextValue() 함수가 동작하면, 부모가 전달해준 함수인 getTextValue(text) 함수를 props.getTextValue() 로 접근을 합니다. 그리고 부모가 전해준 함수에는 text 라는 매개변수를 담고 있으니 

props.getTextValue("자식에서 부모로 값 보내기!") 이렇게 작성을 해주면 "자식에서 부모로 값 보내기!" 라는 문자는 부모 컴포넌트에 있는 getTextValue 함수에 보내지게 되며, 동시에 textValue 의 state가 업데이트 됩니다.