1-6) [리액트 기초] 컴포넌트 이벤트 호출
https://jframework.tistory.com/24
1-5) [리액트 기초] 컴포넌트 값 전달하기
https://jframework.tistory.com/23 1-4) [리액트 기초] JSX란? JSX 문법 // src/components/Body.js import './Body.css'; const Body = () => { const numA = 1; const numB = 2; const strA = 'Hello'; const strB = 'World'; const boolA = true; const boolB = f
jframework.tistory.com
이어서..
이번에는 Props로 컴포넌트 자체를 전달하는 방법을 해보도록 하자.
최상위 App 컴포넌트에서 새로운 자식컴포넌트인 ChildComponent를 생성하고
해당 컴포넌트를 Body 하위에 렌더링 하도록 수정하였다.
이때 Body 자식 요소로 ChildComponent를 배치하거나 자식 컴포넌트에 또 다른 컴포넌트를 배치하면,
배치된 컴포넌트는 자동으로 children 프로퍼티로 저장되어 값이 전달된다.
// src/App.js
import './App.css';
import Header from './components/Header';
import Body from './components/Body';
import Footer from './components/Footer';
function App() {
const name = "리액트앱";
const addr = "평택";
const arrayNum = [1, 2, 3, 4, 5];
const BodyProps = {
name: name,
addr: addr,
arr : arrayNum,
favorList: [
{ id: 1, name: '사과', price: 1000 },
{ id: 2, name: '바나나', price: 2000 },
{ id: 3, name: '포도', price: 3000 },
{ id: 4, name: '귤', price: 4000 },
{ id: 5, name: '배', price: 5000 },
]
}
return (
<div className="App">
<Header />
{/* //Header 렌더링 추가 */}
<Body {...BodyProps}>
<ChildComponent />
</Body>
<Footer />
</div>
);
}
function ChildComponent(props) {
return (
<div>
{/* //props.children은 ChildComponent 태그와 태그 사이에 있는 값을 의미한다. */}
{/* {props.children} */}
child component
</div>
)
}
export default App;
// src/components/Body.js
import './Body.css';
// const Body = (props) => {
const Body = ({name, addr, arr, favorList, children}) => {
const numA = 1;
const numB = 2;
const strA = 'Hello';
const strB = 'World';
const boolA = true;
const boolB = false;
const objA = { a: 1, b: 2, c: 3 };
return (
<div className="body">
<h1>Body props</h1>
<h5>{numA} + {numB} = {numA + numB}</h5>
<h5>{strA} + {strB} = {strA + strB}</h5>
<h5>{ (boolA || boolB) ? '참입니다.' : '거짓입니다.'}</h5>
<h5> {objA.a} :: {JSON.stringify(objA)} </h5>
<h5> {name} :: {addr} :: {arr} :: {arr.length}</h5>
<h5>{favorList.length} :: {favorList.map(i => i.name + ', ')}</h5>
<div>{children}</div>
</div>
);
}
Body.defaultProps = {
arr: [],
favorList:[{id:'1', name:'사과', price:'1000'},]
}
export default Body;
실제로 전달된 children 을 console 로 찍어보면 아래와 같은 object들이 있는 걸 확인 할 수 있다.
컴포넌트 이벤트 처리하기
리액트에서 이벤트 핸들링을 어떻게 하는지 한번 알아보자.
일단, Body 컴포넌트에 버튼을 하나 만들고, 해당 버튼ㄴ을 눌렀을 때 이벤트가 발생되는지를 확인해보자.
// src/components/Body.js
import './Body.css';
// const Body = (props) => {
const Body = ({name, addr, arr, favorList, children}) => {
const numA = 1;
const numB = 2;
const strA = 'Hello';
const strB = 'World';
const boolA = true;
const boolB = false;
const objA = { a: 1, b: 2, c: 3 };
console.log(children);
// 마우스 클릭 이벤트 핸들러
const handleOnClick = (e) => {
console.log('이벤트 발생', e)
alert('버튼 클릭2');
}
return (
<div className="body">
<h1>Body props</h1>
<h5>{numA} + {numB} = {numA + numB}</h5>
<h5>{strA} + {strB} = {strA + strB}</h5>
<h5>{ (boolA || boolB) ? '참입니다.' : '거짓입니다.'}</h5>
<h5> {objA.a} :: {JSON.stringify(objA)} </h5>
<h5> {name} :: {addr} :: {arr} :: {arr.length}</h5>
<h5>{favorList.length} :: {favorList.map(i => i.name + ', ')}</h5>
<div>{children}</div>
<button name="aButton" onClick={() => alert('버튼 클릭')}>버튼</button>
<button name="bButton" onClick={() => { handleOnClick() }}>버튼2-A(오류)</button>
<button name="cButton" onClick={handleOnClick}>버튼2-B(정상)</button>
</div>
);
}
Body.defaultProps = {
arr: [],
favorList:[{id:'1', name:'사과', price:'1000'},]
}
export default Body;
페이지에서 버튼을 클릭하면 이벤트가 호출이되고 이벤트가 가지고있는 여러 이벤트 객체 프로퍼티들이 내장되어있는 것을 확인 할 수 있다.
