🔸 counter컴포넌트에서 count의 초기값을 0이 아닌 App컴포넌트가 전달하는 값으로 쓰게 하고 싶을 때
import logo from './logo.svg';
// import './App.css';
import MyHeader from './MyHeader';
// import MyFooter from './MyFooter';
import Counter from './Counter';
function App() {
return (
<div>
<MyHeader />
<Counter initialValue={5}/>
{/* 자식 컴포넌트(Counter)에게 initialValue라는 이름을 붙여서 5라는 값을 전달할 수 있다. */}
</div>
);
}
export default App;
✔ 부모컴포넌트(App)에서 자식 컴포넌트(Counter)에게 어떤 값을 이름을 붙여서 전달하는 방식을 prop이라고 부를 수 있다.
✔ 전달되는 데이터들을 복수형으로 얘기하면 props라고 한다.
🔸 App 컴포넌트에서 전달받은 값을 counter 컴포넌트에서 사용하고 싶을때
// App.js 파일(부모)
import MyHeader from './MyHeader';
import Counter from './Counter';
function App() {
return (
<div>
<MyHeader />
<Counter initialValue={5} a={1}/>
{/* 자식 컴포넌트(Counter)에게 initialValue라는 이름을 붙여서 5라는 값을 전달할 수 있다. */}
{/* 부모컴포넌트(App)에서 자식 컴포넌트(Counter)에게 어떤 값을 이름을 붙여서
전달하는 방식을 prop이라고 부를 수 있다. */}
{/* 전달되는 데이터들(initialValue={5} a={1})을 **복수형**으로 얘기하면 **props**라고 한다. */}
</div>
);
}
export default App;
//Counter.js(자식)
import React, {useState} from "react";
const Counter = (props) =>{
//App컴포넌트(부모)에서 전달받은 데이터들(initialValue={5} a={1})을
//사용하기 위해서는 Counter함수의 매개변수로 props를 받으면 된다.
console.log(props)
//데이터를 제대로 받았는지 콘솔에 출력해보면
//{a :1, initialValue : 5}
// a : 1
// initialValue : 5
//이렇게 콘솔창에 객체 형태로 출력된다.
// const [count, setCount] = useState(0)
// props를 Counter컴포넌트에서 꺼내쓸려면 **점표기법**으로 접근해야한다.(객체이기 떄문에)
const [count, setCount] = useState(props.initialValue)
const onIncrease =() =>{
setCount(count +1)
}
const onDecrease = () =>{
setCount(count -1)
}
return (
<div>
<h2>{count }</h2>
<button onClick = {onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)
}
export default Counter;🔸 만약 App컴포넌트에서 전달받은 값이 너무 많다면??
//App.js
import MyHeader from './MyHeader';
import Counter from './Counter';
function App() {
return (
<div>
<MyHeader />
<Counter a={1} b= {2} c={3} d={4} initialValue={5} />
//전달되는 props가 너무 많다.
</div>
);
}
export default App;
이럴 경우에는 데이터를 담은 객체를 만들어준 후 spread연산자를 통해 데이터를 전달하면 된다.
//App.js
import MyHeader from './MyHeader';
import Counter from './Counter';
function App() {
//데이터를 담은 객체
const counterProps = {
a : 1,
b : 2,
c : 3,
d : 4,
initialValue : 5
}
return (
<div>
<MyHeader />
<Counter {...counterProps} />
//spread연산자를 사용하여 데이터 전달
</div>
);
}
export default App;객체의 spread형식으로 전달했으니깐 받는 쪽에서도 객체로 전달 받아야 한다.
//Counter.js
import React, {useState} from "react";
const Counter = ({initailValue}) =>{
//비구조화 할당을 통해서 데이터를 받을 수 있다.
//전달받은 props라는 객체에서 initailValue값만 꺼내 쓴것이다.
const [count, setCount] = useState(initialValue)
const onIncrease =() =>{
setCount(count +1)
}
const onDecrease = () =>{
setCount(count -1)
}
return (
<div>
<h2>{count }</h2>
<button onClick = {onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)
}
export default Counter;🔸 (응용) defaultProps
App컴포넌트에서 전달되지 않은 값을 Counter 컴포넌트에서 매개변수로 받아 사용하려고 했을때 undefined가 안나오는 방법
//Counter.js
import React, {useState} from "react";
const Counter = ({dada}) =>{
//dada라는 값은 App 컴포넌트에서 전달된 값이 아니다.
//전달받은 값이 아니기 때문에 NaN값이 나온다. (에러가 나온다.)
const [count, setCount] = useState(dada)
const onIncrease =() =>{
setCount(count +1)
}
const onDecrease = () =>{
setCount(count -1)
}
return (
<div>
<h2>{count }</h2>
<button onClick = {onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
</div>
)
Counter.defaultProps = {
dada: 0;
}
//defaultProps 기능을 이용하면 전달받지 못한 props의 기본값을
//설정해서 에러를 방지할 수 있다.
}
export default Counter;
🔸 count가 홀수인지 짝수인지 판별-부모(Counter)이 자식(OddEventResult)에게 동적인 데이터(state)를 전달하는 방법
//OddEventResult.js(자식)
//count가 홀수인지 짝수인지 판별하는 컴포넌트(OddEventResult)
const OddEventResult =({count}) => {
//count를 props로 받아와야 한다.
console.log(count);
//콘솔에 count를 출력하면 버튼을 클릭할때마다 콘솔창에 count의 값이 출력된다.
//즉, 부모 컴포넌트인 Counter에서 count값을 잘 받아왔다는 것을 알 수 있다.
return <>{count%2===0? "짝수":"홀수"}</>
}
export default OddEventResult;
//Counter.js(부모)
import React, {useState} from "react";
import OddEventResult from "./OddEventResult";
const Counter = (props) =>{
const [count, setCount] = useState(props.initialValue)
//count가 홀수인지 짝수인지 판별하는 컴포넌트(OddEventResult)
const onIncrease =() =>{
setCount(count +1)
}
const onDecrease = () =>{
setCount(count -1)
}
return (
<div>
<h2>{count }</h2>
<button onClick = {onIncrease}>+</button>
<button onClick={onDecrease}>-</button>
<OddEventResult count={count} />
{/* 자식 컴포넌트(ddEventResult)에 count라고 이름 붙임 count값을 전달한다. */}
</div>
)
}
export default Counter;
브라우저 결과
🎃 여기서 잠깐! re-rendering이란?
✔ rendering이란?
사용자가 화면에 view를 보여 주는 것을 렌더링이라고 한다.
✔ re-rendering이란?
사용자 화면에 view를 다시 새롭게 보여준다는 의미이다.
✔ 컴포넌트가 re-rendering 되는 조건
1. 자신의 상태가 변경될 때(state 변경) -리액트의 컴포넌트는 본인이 관리하고 본인이 가진 state가 바뀔때마다 리랜더(rerender)가 된다.
2. 부모 컴포넌트가 리렌더링 될 때 -내 부모가 리랜더가 되면 나도 리랜더가 된다.
3. 자신이 전달받은 props가 변경될 때(props) -나에게 내려오는 props가 바뀔때마다 리랜더가 된다.
🔸 좀 더 이쁘게 만들어보자! - 컴포넌트를 감쌀 컴포넌트를 인라인 style로 꾸며주자!
//App.js
import MyHeader from './MyHeader';
import Counter from './Counter';
import Container from './Container';
function App() {
const counterProps = {
a : 1,
b : 2,
c : 3,
d : 4,
initialValue : 5
}
return (
<Container>
{/* 컴포넌트 사이에 jsx코드를 작성하게 되면 */}
{/* Container는 아래 jsx코드들을 자식으로 배치했다. */}
<div>
<MyHeader />
<Counter {...counterProps}/>
</div>
</Container>
);
}
export default App;
//Container.js
const Container= ({children}) => {
//children이라는 props를 받는다.
// <div>
// <MyHeader />
// <Counter {...counterProps}/>
// </div>
//App의 jsx코드들을 children으로 props로 받게 된다.
return (
<div style = {{margin:20, padding:20, border: "1px solid gray"}}>
{children}
{/* children을 값처럼 사용했다. */}
</div>
)
}
export default Container;결과
