[React #20] Props / 이벤트 핸들러

01. Props

• 리액트에서는 부모 컴포넌트가 자식 컴포넌트에게 원하는 값을 전달할 수 있음
• 자식 컴포넌트에서 부모 컴포넌트에게 값을 전달하는 것은 불가능
• 함수를 호출하면서 인수 전달하는 것과 비슷함
• Props는 전달된 값을 의미
• Props를 이용하여 전달하는 값에 따라 각각 다른 UI를 렌더링할 수 있음
• 문자열, JavaScript값, HTML 요소, React 컴포넌트 전달 가능

 

02. Props로 값 전달해 각각 다른 텍스트 렌더링하기

 

01) 부모 컴포넌트에서 props 값 전달

- 방법 1 : 바로 전달

import './App.css';
import Button from './components/Button';

export default function App() {
  return (
    <>
      <Button text={'메일'} />
      <Button text={'카페'}/>
      <Button text={'블로그'}/>
    </>
  );
}

 

- 방법 2 : 스프레드 연산자 이용

import './App.css';
import Button from './components/Button';

const buttonProps = {
  text: '메일',
  color: 'red',
  a: 1,
  b: 2,
  c: 3,
};

export default function App() {
  return (
    <>
      <Button {...buttonProps} />
    </>
  );
}

 

 

02) 자식 컴포넌트에서 props 값 받기

• 자식 컴포넌트에게 props를전달하면 값들은 객체로 묶여서 자식 컴포넌트의 매개변수로 제공이 됨

- 방법 1 : 점 표기법

import React from 'react';

function Button(props) {
  console.log(props);
  return <button>{props.text}</button>;
}

export default Button;

 

- 방법 2 : 구조 분해 할당

import React from 'react';

function Button({ text }) {
  return (
    <button>
      {text}
    </button>
  );
}

export default Button;

실행화면

 

 

03) props 기본값 설정하기

• 전달한 props 값을 받을 때 값이 없으면 오류가 발생할 수 있음
• 그래서 자동으로 설정될 기본값을 설정하는 게 좋음

import React from 'react';

function Button(props) {
  console.log(props);
  return (
    <button style={{ color: props.color }}>
      {props.text} - {props.color}
    </button>
  );
}

Button.defaultProps = {
  color: 'black',
};

export default Button;

 

실행화면

 

 

04) 부모 컴포넌트에서 자식요소 보내기

📑 부모 컴포넌트

import './App.css';
import Button from './components/Button';

export default function App() {
  return (
    <>
      <Button text={'메일'} />
      <Button text={'카페'} />
      <Button text={'블로그'}>
        <div>자식요소</div>
      </Button>
    </>
  );
}

 

📑 자식 컴포넌트

import React from 'react';

function Button({ text, children }) {
  return (
    <button>
      {text}
      {children}
    </button>
  );
}

export default Button;

• 부모에서 자식 요소로 배치된 <div> 태그가 자동으로 자식 컴포넌트에서 'children'이라는 props로 전달이 됨

실행화면

 

 

 

03. Event Handling

• 웹에서 이벤트가 발생했을 그것을 처리하는 것

01) 이벤트 핸들러

- 이벤트가 발생했을 때 실행될 수 있도록 설정한 함수

 

📑Button.jsx

 

- 방법 1 : 익명 함수

import React from 'react';

function Button({ text, children }) {
  return (
    <button
      onClick={() => {
        console.log(text);
      }}
    >
      {text}
      {children}
    </button>
  );
}

export default Button;

• onClick = { () => {} } : 클릭 이벤트가 발생하였을 때 함수 실행

- 방법 2 : 함수 이름 전달

import React from 'react';

function Button({ text, children }) {
  const onClickButton = () => {
    console.log(text);
  };

  return (
    <button onClick={onClickButton} onMouseEnter={onClickButton}>
      {text}
      {children}
    </button>
  );
}

export default Button;

• 함수의 이름만 전달해야 함 (함수의 호출 결과를 전달하면 안됨)
• 콜백 함수 전달하듯 함수의 이름만 이벤트 핸들러로 설정하기
• onClick() : 클릭할 때, onMouseEnter : 마우스 호버했을 때

02) 이벤트 객체

• 리액트에서 발생하는 모든 이벤트들은 이벤트 핸들러 함수를 호출하면서 매개 변수로 이벤트 객체라는 것을 제공함

import React from 'react';

function Button({ text, children }) {
  // 이벤트 객체
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

  return (
    <button onClick={onClickButton} onMouseEnter={onClickButton}>
      {text}
      {children}
    </button>
  );
}

export default Button;

콘솔창

💡 합성 이벤트 객체

• SyntheticBaseEvent : 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태
• Cross Browsing Issue : 브라우저 별 동작 방식이 달라 발생하는 문제
• 합성 이벤트는 하나의 통일된 규격으로 이벤트 객체를 포맷팅해줌  →  Cross Browsing Issue를 해결
• 정리하면, 모든 브라우저에서 사용할 수 있는 통합된 규격의 이벤트 객체
• 합성 이벤트 객체 안에는 발생한 이벤트와 관련된 모든 정보가 들어있음

 

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'