■ 함수형 컴포넌트
BucketList.js
|
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
|
// 리액트 패키지를 불러온다.
import React from 'react';
// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
// return (
// <div>버킷 리스트</div>
// );
// }
// 이렇게 쓸 수도 있다.. =>가 들어간 함수를 화살표 함수라고 한다.
// ()안에 props는 부모 컴포넌트부터 받아온 데이터다.
// 얘의 부모가 누구냐?
const BucketList = (props) => {
// 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다.
return (
<div>
버킷 리스트
</div>
);
}
// 우리가 만든 함수형 컴포넌트를 export 해준다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있다.
export default BucketList;
|
cs |
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
function App() {
return (
<div className="App">
<h1>내 버킷리스트</h1>
{/* 컴포넌트를 넣어줍니다. */}
<BucketList/>
</div>
);
}
export default App;
|
cs |
■ 클래스형 컴포넌트
App.js
|
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
31
|
import React from 'react';
import logo from './logo.svg';
import './App.css';
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from './BucketList';
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class App extends React.Component {
constructor(props){
super(props);
// App 컴포넌트의 state를 정의해줍니다.
this.state = {
list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
};
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
return (
<div className="App">
<h1>내 버킷리스트</h1>
{/* 컴포넌트를 넣어줍니다. */}
<BucketList/>
</div>
);
}
}
export default App;
|
cs |
◎ Component에서 Component로 데이터를 넘겨주자!
App 컴포넌트가 가지고 있는 state를 BucketList에 넘겨주자!
{/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
<BucketList list={this.state.list}/>props의 state에 list가 있는데 그 리스트를 넘겨준다! 는 뜻
BucketList.js 에서 console.log로 props를 잘 받아왔는지 확인한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 리액트 패키지를 불러온다.
import React from 'react';
// App.js에서 받아온 props
const BucketList = (props) => {
console.log(props);
// 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트)를 반환한다.
return (
<div>
버킷 리스트
</div>
);
}
// 우리가 만든 함수형 컴포넌트를 export 해준다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있다.
export default BucketList;
|
cs |
728x90
'WEB > REACT' 카테고리의 다른 글
| [REACT] styled-components 패키지 설치, 사용하기 (2) | 2021.06.27 |
|---|---|
| [REACT] App.js에서 받아온 state를 사용하여 뷰만들고 css적용하기 (우정테스트 start페이지) (0) | 2021.06.27 |
| [REACT] props의 state를 받아와서 map으로 보여주기 (0) | 2021.06.27 |
| [REACT] Component란? (0) | 2021.06.27 |
| [REACT] CRA(create-react-app)/ JSX란? (0) | 2021.06.27 |