오늘부터 공부한다
1. React 스터디 1일차 본문
create-react-app 모듈을 통해 리액트 앱을 생성할 수 있다.
위 사진은 스터디에 index.css같은 필요없는 파일들을 제거하고 react 구동에 있어서 필수적인 파일들로 구성했으며, 주로 src 폴더의 App.js, index.js를 수정하게 됩니다.
react는 App.js에서 컴포넌트를 정의하고 정의된 컴포넌트에서 html을 반환하여 index.js의
ReactDOM.render() 모듈을 통해 컴포넌트를 import하여 사용한다.
ReactDOM.render({컴포넌트}, {id or class})
이때, id와 class는 public 폴더 안의 index.html의 태그들로 결정됩니다.
src/App.js
function App() {
return (
<div>
hello!!!!
</div>
);
}
src/index.js
ReactDOM.render( <App />, document.getElementById('root') );
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
JSX
컴포넌트는 자바스크립트와 HTML을 조합한 JSX문법을 사용하고 있습니다.
import React from 'react' 모듈을 불러와야 리액트가 JSX를 이해할 수 있습니다.
이 JSX는 컴포넌트를 생성할때 주로 쓰이며, 컴포넌트를 작성할때 중요한 규칙의 이름을 대문자로 시작해야합니다.
src/Potato.js 생성
import React from 'react';
function Potato() {
return <h3>I love potato</h3>;
}
export default Potato;
Potato 컴포넌트 사용예제 예제1) src/index.js
import Potato from './Potato';
ReactDOM.render( <Potato />, document.getElementById('root') );
Potato 컴포넌트 사용예제 예제2) src/App.js
import Potato from './Potato';
function App() {
return (
<div>
hello!!!!
<Potato />
</div>
);
}
props
props는 컴포넌트에 데이터를 주고받을 수 있는 기능을 지원합니다.
컴포넌트를 호출하는 태그에 이름을 정하여(?) 전송합니다.
public/App.js
import Potato from './Potato';
function App() {
return (
<div>
hello!!!!
<Potato name="ozy" size="big" from="korea" />
</div>
);
}
public/Potato.js 사용법1
import React from 'react';
function Potato(props) {
return (
<h3>I love { props.name }</h3>
<h3>I from { props.from }</h3>
<h3>I am { props.size }</h3>
);
}
export default Potato;
public/Potato.js 사용법2
import React from 'react';
function Potato({name, size, from}) {
return (
<h3>I love { props.name }</h3>
<h3>I from { props.from }</h3>
<h3>I am { props.size }</h3>
);
}
export default Potato;
Map()
javascript처럼 Map 함수를 사용하여 다수의 컴포넌트를 출력할 수 있습니다.
src/App.js
import Potato from './Potato';
const potatoList = [
{
key: 1,
name: 'osy',
size: 'big',
from: 'seoul'
},
{
key: 2,
name: 'uzy',
size: 'small',
from: 'busan'
}
]
function App() {
return (
<div>
hello!!!!
{
potatoList.map(potato => {
<Potato name= {potato.name} size= {potato.size} from= {potato.size} />
})
}
</div>
);
}
prop-types (유효성 검사 모듈)
src/Potato.js
npm install prop-typesimport React from 'react';
import PropTypes from 'prop-types';
function Potato(props) {
return (
<h3>I love { props.name }</h3>
<h3>I from { props.from }</h3>
<h3>I am { props.size }</h3>
);
}
Potato.propTypes = {
name: PropTypes.string.isRequired,
size: PropTypes.string.isRequired,
from: PropTypes.string,
}
export default Potato;
state
props로는 다 처리하지 못할 동적 데이터들을 처리합니다.
src/App.js
import React from 'react';
class App extends React.Component {
//Todo
}
export default App;
App(function)을 App(class)로 바꾼 후 React.Component 클래스를 상속합니다.
App은 function이 아니기에 return문을 사용해줄 수 없고 JSX를 사용하기 위해 render() 함수를 사용하여 반환합니다.
import React from 'react';
class App extends React.Component {
render() {
return <h1> hello </h1>;
}
}
export default App;
import React from 'react';
class App extends React.Component {
state = {
count: 0,
}
render() {
return <h1> this.state.count </h1>;
}
}
export default App;
import React from 'react';
class App extends React.Component {
state = {
count: 0,
}
add = () => {
this.state.count = 1;
}
minus = () => {
this.setState({ count: -1 });
}
render() {
return <h1> this.state.count </h1>;
<button onClick={this.add}>add</button>
<button onClick={this.minus}>minus</button>
}
}
export default App;
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
console.log('hello');
}
state = {
count: 0,
}
add = () => {
this.state.count = 1;
}
minus = () => {
this.setState({ count: -1 });
}
render() {
return <h1> this.state.count </h1>;
<button onClick={this.add}>add</button>
<button onClick={this.minus}>minus</button>
}
}
export default App;