최근 React를 쓸일이 생겨서 기본적인 사항들을 기록해 놓으려고 한다
React 한글 메뉴얼: https://ko.reactjs.org/
React 기초: https://react.vlpt.us/
시작하기
- node.js로 시작하기: node.js가 설치되어 있어야 한다
$ npm install -g create-react-app
$ create-react-app tmp_project
$ cd tmp_project
$ npm start
- git clone으로 시작하기
$ git clone https://github.com/b1ix/tmp_project.git
$ cd tmp_project
$ npm install
$ npm start
- yarn으로 시작하기: node.js로 yarn 설치후 시작하면 된다
$ npm install -g yarn
$ yarn create react-app tmp_project
$ cd tmp_project
$ yarn start
기본구조
App.js
function App() {
return (
<div>hello~</div>
);
}
// 내용을 코딩한 뒤 export 시킴
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // App.js를 불러옴
const root = ReactDOM.createRoot(document.getElementById('root'));
// <App /> 방식으로 export된 App를 사용
// root는 index.html파일의 <div id="root"></div>에서 랜더링되어 사용됨
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
index.html
<html>
<header></header>
<body>
<!-- index.js의 root가 사용되는 부분 -->
<div id="root"></div>
</body>
</html>
JSX 기본 문법
- JSX: React에서 HTML태그를 쉽게 쓰게 해주는 문법
- 사용자 정의 컴포넌트는 반드시 대문자로 시작
해야 한다
- 태그는 반드시 닫혀야 한다
- 두가지 이상의 태그는 하나의 태그로 감싸져 있어야 한다
- 변수를 JSX내에서 쓸 경우에는 {}로 감싸면 된다
- class를 쓸때는 className이라고 해야 한다
function App() {
const style1_text = 'style1 applied'
const style1 = {
backgroundColor: 'red',
color: 'yello',
borderRadius: '10px',
}
return (
<>
<div className="test_box1"></div>
<div style={style1}>{style1_text}</div>
<br />
{/* 주석1 */}
<input //주석2
/>
</>
);
}
Props
- 어떤 값을 컴포넌트에 전달 하기 위해서 사용하는 방식
- 전달된 값이 없을때는 defaultProps값으로 기본 값을 지정 할 수 있다
- 컴포넌트 태그 사이에 넣은 값을 사용할 때는 props.children을 쓴다
wrapper.js
import React from 'react'
function Wrapper({children}){
const style1 = {
border:"3px solid black",
padding:"10px",
}
return (
<div style={style1}>
{children}
</div>
)
}
export default Wrapper
hello.js
import React from 'react'
function Hello(props) {
return <div>Hello! <span style={{color:props.color}}>{props.name}</span></div>
}
Hello.defaultProps = {
name: 'B1ix!',
color: 'green'
}
export default Hello;
App.js
import React from 'react';
import Wrapper from './wrapper';
import Hello from './hello';
function App() {
return (
<Wrapper>
<Hello name="b1ix" color="blue"/>
<Hello color="red"/>
</Wrapper>
);
}
export default App;
위처럼 사용시 아래와 같은 결과가 나오게 된다
Export, Import
- 기본 default 방식
//App.js
const aa ...
export default aa
//index.js
import aa from 'App'
- 다중방식
//App.js
export const aa ...
export const bb ...
export const cc ...
//index.js
import {aa, bb, cc} from 'App'
- 다중 + default 방식
//App.js
export const aa ...
export const bb ...
export const cc ...
export default aa
//index.js
import aa, { bb, cc} from 'App'
절대경로
- root에 jsconfig.json 파일을 만들고 아래 구문을 집어 넣는다.
-