컴포넌트Component
클래스형과 함수형이 있는데 클래스형은 잘 쓰지 않는다.
컴포넌트 예)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
...
</header>
<div class="container">
<div id="image-banner">
...
</div>
<div id="contents-1">
...
</div>
</div>
<footer>
...
</footer>
</body>
</html>위의 html 조각내보기:
즉, 이 웹 사이트는,
크게 header, container, footer세 개의 컴포넌트가 있고,
container 컴포넌트는, imagebanner, contents1 컴포넌트로 이루어져 있는 것이다. 이렇게 조각을 잘 낼 줄 알면 리액트를 잘 할 수 있다!!
State
컴포넌트가 쓰는/가지는 데이터 (내가 가지고 있는 데이터)
컴포넌트를 예로 들어보자! 이 데이터는 나 컴포넌트에서는 쓰지 않는 데이터일 것이다. state는 이처럼 **한 컴포넌트에만 사용하는 정보를 주로 넣어놓고 생성, 수정**하는 것. 생성도 수정도 오직 해당 컴포넌트 내에서만 이루어진다.Props
부모 Component 에게서 받아오는 데이터
<container>
<imagebanner/>
<contents1/>
</container>이럴때, 가 가지고 있는 이미지 경로를 에게 전달해주면, 이 이미지 경로가 컴포넌트의 props가 되는 것.
Props로 받은 데이터는 수정할 수 없다!
함수형 Component
[code convention]
폴더는 소문자로 시작하는 카멜케이스를 사용
JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용
// 리액트 패키지를 불러옵니다.
import React from 'react';
// 함수형 컴포넌트는 이렇게 쓸 수도 있고
// function Bucketlist(props){
// return (
// <div>버킷 리스트</div>
// );
// }
// 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요.
// 저희는 앞으로 화살표 함수를 사용할거예요.
// 앗 () 안에 props! 부모 컴포넌트에게 받아온 데이터입니다.
// js 함수가 값을 받아오는 것과 똑같이 받아오네요.
const BucketList = (props) => {
// 컴포넌트가 뿌려줄 ui 요소(리엑트 엘리먼트라고 불러요.)를 반환해줍니다.
return (
<div>
버킷 리스트
</div>
);
}
// 우리가 만든 함수형 컴포넌트를 export 해줍니다.
// export 해주면 다른 컴포넌트에서 BucketList 컴포넌트를 불러다 쓸 수 있어요.
export default BucketList;component를 만들어서 export를 해줘야 다른 컴포넌트에서 쓸 수 있다.
이제 app.js로 돌아와서 BucketList 컴포넌트를 불러와야 한다.
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;클래스형 Component
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() {
// this 키워드를 통해 state에 접근할 수 있어요.
console.log(this.state);
return (
<div className="App">
<h1>내 버킷리스트</h1>
{/* 컴포넌트를 넣어줍니다. */}
{/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
<BucketList list={this.state.list}/>
</div>
);
}
}
export default App;
꾸준하게 하는 법을 배우는 중입니다!