props란?

저번에 썼던 컴포넌트 글에 이어서 props를 설명하려고 하는데요

props란 부모 컴포넌트에서 자식컴포넌트로 전달하는 jsx의 html attribute와 children을 전달하는 객체입니다

props

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const al = () => {
  alert('확인');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <App onClick={al} id="app"/>
    <App className='check1'/>
    <button onDoubleClick={al} className="check2">확인</button>
  </>
);

부모 컴포넌트 역할의 index.js

import './App.css';


function App({onClick,id}) {
  
  return (
   <>
  <button onClick={onClick} id={id}>App</button>
   </>
  );
}

export default App;

자식 컴포넌트 App.js

index.js의 App태그를 보시면 onClick과 id의 attribute를 설정 해주고 render()함수를 통해 렌더링을하게 되면 App.js를 호출할때 이 attribute 즉 props를 전달합니다

props 사용 방법

import './App.css';


function App({onClick,id='not',className}) {
  
  return (
   <>
  <button onClick={onClick} id={id} className={className}>App</button>
   </>
  );
}

function App({onClick,id='not',className})
컴포넌트의 메인함수에 파라미터에 {받는 attribute이름}으로 사용합니다 index.js(부모컴포넌트)로부터 onClick과 id를 받을거니까 {onClick,id}인데 받는 attribute가 없어도 되고 제가한 id='not'같이 초기값을 설정해주면

초기값이 없이 전달되는 props가 없으면 없는거고 초기값이 있으면 제대로 전달이 되어 설정이 되는것을 보실수있습니다

또한

import './App.css';


function App(props) {
  
  return (
   <>
  <button onClick={props.onClick} id={props.id} className={props.className}>App</button>
   </>
  );
}

export default App; 

이런식으로 props를 하나의 객체 파라미터로 취급하여 받아서 객체이름.attribute(저는 설명을위해 파라미터 이름을 props로 했습니다)로 사용하실수 있습니다
하지만 이러면 초기값과 바로 뒤에 설명할 children을 사용하지 못합니다

Children

마지막으로 props에는 children이있는데 저는 지금까지 버튼의 value값을 따로받지 않고 'App'이라는 값을 사용하였었는데

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const al = () => {
  alert('확인');
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <App onClick={al} id="app"/>
    <App className='check1'>이름</App>
    <button onDoubleClick={al} className="check2">확인</button>
  </>
);

import './App.css';


function App({onClick,id='not',className,children='없음'}) {
  
  return (
   <>
  <button onClick={onClick} id={id} className={className}>{children}</button>
   </>
  );
}

export default App;

부모 컴포넌트에서 자식 컴포넌트를 호출할때 <컴포넌트>children값</컴포넌트>형태로 설정해주면 children값이 전달되고 <컴포넌트/>로 전해주지 않을 수 있으며 자식컴포넌트에서 children의 초기값도 설정할수 있습니다

결과

이번엔 리액트 기초중 props를 알아봤고 다음엔 state를 들고 찾아뵙겠습니다
공부를 더하고 lifeCycle도 게시하고싶네용