[React] React 의 Props && Children

• props와 state는 React 에서 데이터를 다룰 때 사용하는 개념이다.

props : 부모에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용하며 , 직접적으로 수정할 수 없는 값이다.

state : Component 내부에서 관리하는 데이터로, 변경이 가능한 값을 말한다.

Props

• React 에서 한 Component 에서 다른 Component로 데이터를 전송할 때 사용하는 특수 객체가 props이다.

단방향 데이터 흐름

• 그러나 Props는 단방향으로 데이터를 전송한다는 특징 이 있다. 그러므로 자식에서 부모로, 동일한 레벨의 Component로 Props를 전달하는 것은 불가능하다.

import './App.css';
import { useState } from 'react';
import Register from './components/Register';
import HookExam from './components/HookExam';
import Button from './components/Button';
function App() {
  // const [count, setCount] = useState(0);

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

  return (
    <>
      <Button {...buttonProps} />
      <Button text={'블로그'}>
        <div>자식요소</div>
        <span>다른 자식요소</span>
      </Button>
    </>
  );
}

export default App;

const Button = ({ text, color = 'black', children }) => {
  //이벤트 객체
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };
  // 마우스 엔터 이벤트 핸들러
  const onMouseEnter = (e) => {
    e.target.style.backgroundColor = 'lightgreen';
  };

  // 마우스가 버튼을 떠날 때 배경색을 원래대로 돌리는 핸들러
  const onMouseLeave = (e) => {
    e.target.style.backgroundColor = '';
  };

  console.log(`children = ${children}`);
  return (
    <button
      onClick={onClickButton}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

• props로 데이터를 전달하는 방법은 우선 Component에 prop을 정의하고 값을 할당해야 한다.

• 부모 컴포넌트인 App.jsx에서 ButtonProps를 정의하고, Button 컴포넌트를 호출하면서 동시에 props로 값을 넘겨주었다.

• 하나의 컴포넌트에는 spread 연산자로 buttonProps 객체의 값 전체를 넘겨주었고, 다른 하나의 Button 컴포넌트는 직접 text 값을 넘겨주어 표시하였다.

• 여기서 children 개념이 등장하는데, React 공식 문서에서는 Children의 소개글을

여는 태그와 닫는 태그를 모두 포함하는 JSX 표현식에서 해당 태그 사이의
내용은 특수 소품으로 전달됩니다 props.children. 여는 태그와 닫는 태그 사이에 문자열을 넣으면 props.children 해당 문자열이 됩니다.

• 라고 번역되어 있다. 한 마디로 풀어서 말하면, "태그와 태그 사이의 모든 애용을 표시하기 위해 사용되는 특수한 props" 라고 할 수 있다.

• 즉, 컴포넌트가 렌더링될 때, 컴포넌트의 태그 사이에 포함된 내용을 자동으로 자식요소로 전달하는 특수한 prop 이라고 할 수 있다.

• 위 코드에서 첫 번째 Button 컴포넌트는 text와 color props를 전달받지 않으므로 기본값이 적용된다.

• 두 번째 Button 컴포넌트는 text와 color 를 전달 받으며, div 와 span 요소를 children 으로 전달한다.

• children은 Button 컴포넌트의 시작 태그와 종료 태그 사이에 포함된 내용이 됩니다. 예를 들어, 두 번째 Button 컴포넌트에서 {children}은

  자식요소
  와 다른 자식요소를 포함한다.

---

요약

• children : React에서 컴포넌트의 시작 태그와 종료 태그 사이에 포함된 모든 내용을 의미한다. 이 내용은 자식 컴포넌트의 children prop 으로 전달되어 컴포넌트 내부에서 사용된다.