티스토리 뷰
728x90
컴포넌트에 데이터를 전달하는 방법
컴포넌트를 호출하는 곳에서 아래와 같이 컴포넌트에 초기 값을 전달할 수 있음
function App() {
const number = 5;
return (
<div>
<MyHeader />
<Counter a={1} initialValue={number} />
</div>
);
}
컴포넌트에서는 인자로 받아서 사용이 가능함.
import React, { useState } from "react";
const Counter = (props) => {
console.log(props);
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;
아래와 같이 스프레드 연산자로 값을 전달할 수도 있음
function App() {
const number = 5;
const counterProps = {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5,
initialValue: number,
};
return (
<div>
<MyHeader />
<Counter {...counterProps} />
</div>
);
}
받는 쪽에서는 비구조화 할당으로 필요한 prop만 꺼내서 받을 수도 있음
import React, { useState } from "react";
const Counter = ({ initialValue }) => {
console.log(initialValue);
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;
Prop로 아무것도 전달하지 않으면 undefined가 전달되니 주의해야함.
Counter.defaultProps = {
initialValue: 0,
};
위와 같이 defaultProps를 지정하여 예외를 방지할 수 있음.
React는 자기가 가진 State가 바뀌면 리렌더링이 되고
자신에게 전달되는 Props가 바뀌면 리렌더링이 되고
내 부모 컴포넌트가 변경되어도 리렌더링이 됨
728x90
'헉!! > ETC' 카테고리의 다른 글
[React-Native] 개발환경 구축 (0) | 2024.07.21 |
---|---|
[React] React에서 개발/운영 환경 분리 (0) | 2024.07.21 |
[React] CSS (0) | 2024.07.21 |
[React] JSX (0) | 2024.07.21 |
[Electron] 시작하기 (0) | 2024.07.20 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- Object C
- 아이폰
- 아이폰 개발
- Spring
- Spring Framework
- iOS 개발
- oracle
- MAC OSX 10.7
- 오브젝티브 C
- 자바
- 아이폰 어플리케이션
- Xcode
- SQL
- iPhone
- Programming
- jQuery
- MySQL
- MacOS X
- IT
- 제이쿼리
- JavaScript
- Java
- 자바스크립트
- zero
- tomcat
- 오브젝트 C
- Objective C
- JSP
- iBATIS
- Objective-C
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함