[React] Props & Event

🍩1. Props

▪️ props: properties(속성)
▪️ 단어 뜻 그대로 컴포넌트의 속성값이다.
▪️ props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
▪️ props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있다.(변수, state값, event handler 등)
▪️ {{ }} : 겉 중괄호는 html을 jsx에서 사용하기 위함.
속 중괄호는 객체

🍩2. Props 객체

▪️ 위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 하였다.
▪️ 함수 컴포넌트에서 props, 즉 컴포넌트의 속성을 어떻게 정의하는지 보자

// Parent.js

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

function Parent() {
 const [color, setColor] = useState('red');

 return (
  <div>
   <h1>Parent Component</h1>
   <Child />
  </div>
  ;
 }

 export default Parent;

▪️ Parent.js 부모 컴포넌트이다.
▪️ 부모 컴포넌트 안에서 <Child /> 컴포넌트를 import 후 <h1>태그 아래에 위치해주었다.
▪️ 부모의 state에 있는 데이터를 <Child /> 컴포넌트에게 props를 통해 넘겨보도록 하자.

// Parent.js

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

function Parent() {
 const [color, setColor] =  useState('red');

return (
 <div>
  <h1>Parent Component</h1>
  <Child titleColor={color} />
 </div>
);

export default Parent;

▪️ 자식 컴포넌트의 props로 titleColor속성을 생성해주었다.
▪️ titleColor의 값으로 color, 즉 부모 컴포넌트의 state인 color값을 전달해주었다.
▪️ 이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.
▪️ <Child />컴포넌트 내부에서 전달 받은 props 데이터를 어떻게 사용하는지 확인해보자

✍️props 객체

▪️ 컴포넌트의 props는 객체이다.
▪️ Child.js내부에서 props 객체가 어떻게 생겼는지 확인해보도록 하자

// Child.js

import React from 'react';

function Child(props) {
 // console.log(props);

 return (
  <div>
   <h1 style={{color : props.titleColor}}>Child Component</h1>
  </div>
 );
}
export default Child;

▪️ <child /> 컴포넌트 내부에 <h1>태그가 있다
▪️ 해당 태그의 글자 색상을 부모 컴포넌트의 state로부터 전달받은 데이터를 지정해주도록 하자
▪️ 함수 컴포넌트는 부모가 전달한 props를 인자로 받는다.
▪️ return문 위에서 props값을 console.log로 확인한다.
▪️ 결과 확인 시 props 객체 안에 부모로부터 전달받은 데이터가 key-value 형태로 담겨있는 것을 확인할 수 있다.

<h1 style={{color : props,titleColor}}>Child Component</h1>

// props :  해당 컴포넌트의 props 객체
// props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

▪️ 컴포넌트 내부에서 부모 컴포넌트로부터 전달받은 props 데이터를 사용하기 위해서는 props 객체의 특정 키값, 즉 props.titleColor 이렇게 작성
▪️ 다음으로는 props 객체를 통해 부모에서 정의한 event handler를 전달하는 방법을 살펴보자

🍩3. Props & event

✍️props를 통한 event handler 전달

// parent.js

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

function Parent() {
 const [color, setColor] = useState('red');

 return (
  <div>
   <h1>Parent Componetn</h1>
   <Child titleColor={color} changeColor={() => setColor('blue')} />
  </div>
 );

export default Parent;

▪️ props 객체를 통해 state 데이터 뿐만 아니라 부모에서 정의한 event handler 함수도 넘겨줄 수 있다.
▪️ props의 changeColor값으로 Parent 함수에서 정의한 setColor 함수 자체를 넘겨주고 있다.
▪️ <Child /> 컴포넌트에서 어떻게 props로 전달받은 handleColor 함수를 활용하는지 살펴보자

// Child.js

import React from 'react';

function Child(props) {
  return (
   <div>
     <h1 style={{color : props.titleColor}}>Child Component</h1>
     <button onClick={props,changeColor}>Click</button>
   </div>
  );
 }

export default Child;

▪️ <child /> 컴포넌트 배우에 <button>태그가 있다.
▪️ 다음의 순서에 따라서 코드가 실행된다
▪️ <button>요소에서 <onClick> 이벤트 발생
▪️ 이벤트 발생
▪️ props 객체의 changeColor, 즉 부모 컴포넌트로부터 전달받은 setColor함수 실행
▪️ setColor 함수 실행 시 state의 color값이 blue로 변경
▪️ <Child />컴포넌트에 변경된 state 데이터 (color)전달
▪️ props.titleColor를 글자 색상으로 지정하는 <h1>타이틀 색상 변경