[TIL-39] React-props&Event

props

• properties
• 컴포넌트의 속성값
• 부모 컴포넌트가 자식에게 전달하는 데이터를 가지고 있는 객체이다.

// 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>
			{/*자식 컴포넌트에 넘길 prop 객체에 titleColor와 contentColor를 넣는다.*/} 
			<Child titleColor={color} contentColor={color} />
    </div>
  );
}

export default Parent;

// Child.js

import React from 'react';
//부모 컴포넌트로부터 props를 받는다.
function Child(props) {
  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

• 부모에게서 받은 props 객체
  {titleColor: 'red', contentColor: 'red'}

• 객체에서 각 데이터를 key값으로 사용할 수 있다.
  props.titleColor = "red"
  props.contentColor = "red"

event-handler 전달하기

• props로 함수도 전달할 수 있다.

// Parent.js

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

  function changeColor() {
    setColor('blue');
  }

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

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

• 부모에게서 받은 props 객체
  {titleColor: 'red', changeColor: ƒ}
  changeColor: ƒ changeColor()
  titleColor: "red"

• 버튼 클릭 후
  {titleColor: 'blue', changeColor: ƒ}
  changeColor: ƒ changeColor()
  titleColor: "blue"

• 동작 순서

1. <button>에서 onClick 이벤트 발생
2. 버튼 클릭 시 props.changeColor 샐행
3. props.changeColor ⇒ 부모 컴포넌트의 setColor 함수 실행
4. state의 color가 “red” → “blue”변경
5. <Child /> 컴포는트에 color(blue) 전달
6. props.titleColor가 blue로 변경

React-Event특징

• camelCase를 사용한다.
  예시) onclick → onClick / onchange → onChange
  
• 함수로 이벤트 핸들러를 전달한다.

//HTML
<button onclick="myEvent()">
  click me
</button>

//React
<button onClick={myEvent}>
  click me
</button>

preventDefault

• 태그가 가지고 있는 기본 동작을 막는다.

예시)

<a href="/" onClick={(event)=>{
	event.preventDefault();
}}>이 a태그는 클릭해도 페이지를 이동하지 않습니다.</a>

참고) React공식페이지-handling-events