목차
1. react 설치
2. react 기본구성
3. react component 만들기
4. react Component Life Cycle
5. react Router
- 웹 브라우저는 react 자체를 이해하지 못함 => webpack, babel, react compile 작업 필요
- 위의 작업을
create-react-app
이 자동으로 설정해줌
$ npx create-react-app FOLDER_NAME
package.json 참고해보기
$ npm run
react application 실행 : 서버 자동 설정해줌!
git 올리기
git init
: git 초기화git remote add origin 'repository URL'
: 원격 저장소 연결git add .
: 커밋할 파일 준비git commit -m "write commit message"
: 커밋 & 커밋메시지 작성git push origin master
: 원격저장소에 올리기
- public
- index.html : 기본 소스코드
- src : 주요 디렉터리
- App.js : 컴포넌트의 시작 파일
- index.js : 컴포넌트가 삽입될 위치 선언 파일
REACT 특징
- [virtual DOM] 방식
- 실제 소스코드(index.html)에는 컴포넌트 정보가 들어가지 않음 => html 로드 시 빈 index.html만 그리기 때문에 굉장히 빠름!
- 가상의 DOM을 그려냄으로써 사용자에게 정보를 제공함 => react가 component를 html에 삽입함.
- application 서버가 실행 중에는 변경사항이 바로 적용됨.
- component : HTML을 반환하는 함수
- react application 하나에 하나의 component만 rendering 가능하다
- 부모 component에 자식 component 추가하는 방식으로 component 만들기
- 추가 component는 모두 [App component] 안에 넣기
- 부모 component에 자식 component 추가하는 방식으로 component 만들기
Component 특징
- Function Component
- Class Component
- JSX
- Component Props
- State
- ./src/App.js : Function Component 생성
import React from "react";
function App() {
return (
<div className="App">Hello World</div>
// rendering 될 코드는 JSX 방식으로 사용하기!!
// JSX문법 안에서 javascript를 사용하고 싶을 경우 : { } 사용하기
);
}
export default App;
JSX : REACT에서만 사용하는 개념으로 javascript와 문법이 조금 다르다 (HTML + javascript)
XO- X O
- ./src/index.js : virtual DOM 위치 선언 (component)
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
// (X) App : 기본 js에서의 변수명 입력하듯이 하면 안됨
// (O) <App/> : [JSX] 방식 사용해야함 - JSX에서 태그는 꼭 닫아야 함 </>
-
component간의 data 공유가 가능하다!
function Hello(props) { return <div>This is {props.name}</div>; } function App() { return <Hello name="react" />; }
-
component는 유일해야 한다. 중복 X
-
component 재활용시에 자주하는 실수 => key 속성을 통해 고유의 component 값을 생성해준다.
-
key props는 하위 coponent로 값 전달 X
const arr = ["react", "vue"]; function Hello(props){ return ( <div>This is {props.name}</div> ) } function App(){ return( <div> {arr.map((data,index) => <Hello name={data} key={index}/> )} </div> ) }
prop-types : component props의 유효성 체크
$ npm i prop-types
- App.js에
import PropType from "prop-types";
추가
component.propTypes = { name: PropTypes.string.isRequired };
다양한 prop 유효성 검사기를 제공한다!
>> prop types 참고 -
- Class Component에서 State를 사용할 수 있다.
- State는 Object이다.
- SetState : state 변경시 사용하는 method
- STATE를 직접 변경하여도, Class Component의 render method는 refresh되지 않음 => setState Method를 통해 render Method를 refresh 함! (변경된 state data를 재 redering하는 것)
- setState를 통해 State를 값을 추가할 수 있다 !
- ./src/App.js : Class Component 생성
//App Class는 react Class Component로부터 properties를 상속받음
class App extends React.Component {
state = {
count: 0
};
handliClick = () => {
//state data 변경은 setState 사용 !!
this.setState(current => ({ count: current.count + 1 }));
};
//class component의 render method를 virtual DOM rendering
render() {
return (
<div>
{this.state.count}
<button onClick={this.handleClick}>click me</button>
</div>
//vue 클릭이벤트와 동일하게 react도 클릭이벤트를 갖고 있음. onClick
);
}
}
state가 필요 없는 경우에는 굳이, class component를 사용하지 않는다..
: react component가 생성 ~ 삭제까지 이루어지는 순서
- 생성자 메소드로서 component가 처음 만들어 질 때 실행.
- 최초 component가 mount되기 전 실행.
- 일반적인 실행 이벤트 :
- this.state 로 state 값을 선언/초기화
- 각종 Event 처리 Binding
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
isLogin = true,
userInfo = null
};
this.handleBtnClick = this.handleBtnClick.bind(this);
}
}
>> **constructor 주의사항**
>> 1. constructor를 사용시, `super(props)`를 반드시 호출하여 this.props 를 정의해 주어야 한다. 버그가 발생할 수 있다.
>> 2. constructor 내부에서 `setState` 등의 업데이트를 사용하면 안 된다. Mount되기전 state업데이는 바람직하지 않다.
- component가 DOM에 Mount될 때, 실행.
-
render
- class Component에 반드시 필요한 메소드 - Component 결과물을 Return하는 메소드- JSX 를 반환해야 함
js class Login extends Component { render(){ return <div>Component Rendering</div> } //return된 Element들이 가상 DOM에 mount되고 실제 DOM에 업데이트 됨 }
>> render 주의사항 >> 1. render 단계 또한setState
사용하면 안된다. render단계에서 setState가 되면 업데이트가 무한대로 이루어진다.
- JSX 를 반환해야 함
-
componentDidMount
- component가 DOM에 mount 되자마자 직후에 실행 - 일반적인 실행 이벤트 :- data fetch (
api 통신
,setState
.. )
DOM에 mount가 되어 준비가 된 상태에서 data를 넣어야하기 때문에, compenetDidMount단계에서 data binding작업을 한다.
- DOM 초기화 작업 ```js class Home extends React.Component { state = { isLoading : true }
componentDidMount () { this.setState({ isLoading : false}); }
render(){ return
{this.state.isLoading ? "loading..." : "welcome"}} } ``` - data fetch (
- component가 update 될때 (setState)
render
- render메소드 재실행 됨componentDidUpdate
- componentDidMount처럼 업데이트가된 직후에 실행!
- DOM에서 component가 제거될 떄
componentWillUnMount
- 구성 요소를 해제하거나 파기 한 후에 실행 됨 - 일반적인 이벤트 :- 일반적으로 네트워크 요청, 이벤트 리스너, 더 이상 필요하지 않은 요소와 같은 남은 항목을 제거하는데 사용
React 생명주기 Mount -> Update -> UnMount
: 네비게이션을 만들어주는 패키지
-
$ npm install react-router-dom
-
주요 속성
-
HashRouter
, BrowserRouterHashRouter
: #으로 router를 구분함 => 다른 서버를 같이 사용할 경우 router구분하기 용이함!- HashRouter사용을 권장함!
//App.js import { HashRouter, Route } from "react-router-dom"; //... function App() { return ( <HashRouter> <Navigation /> <Route path="/" exact={true} component={Home} /> <Route path="/about" component={About} /> <Route path="/movie/:id" component={MovieDetail} /> </HashRouter> ); //<HashRouter> 안에 <Route>component를 통해 router기능을 사용하게된다! } export default App;
-
Router
- 2가지 Prop 기능- path 설정
- 해당 path에 연결될 component (렌더링할 component)
<Route path="/" exact={true} component={Home} /> //exact : // path가 겹치면 해당 component가 모두 렌더링된다. exact를 통해 정확한 path 렌더링만 하게 한다!
-
Link
-
Link는 Router안에 있어야 기능을 할 수 있다.
-
새로고침시키는 태그 대신, react router
<Link>
사용을 하면 새로고침없이 화면전환이 됨. (component 전환)//Navigation.js import {Link} from "react-router-dom"; //... function Navigation () { //a 태그는 html을 새로고침한다 //react에서 SPA로써 새로고침없이 화면전환만 원할 경우 => react-router-dom의 link 메소드 사용하기! return <div className="navi"> <Link to="/">Home</Link> <Link to="/about">About</Link> </div> } export default Navigation
<Link to={{ pathname:`/movie/${id}`, state:{ id, year, title, summary, poster, genres } }} >
<Link to={{}}>
에 속성을 object형식으로 추가할 수 있다.
redirect
- path에 대한 속성.
this.props.history
: router 속성을 통해 경로 변경을 할 수 있다.this.props.location
: 현재 path를 알 수 있다.
class MovieDetail extends React.Component { componentDidMount (){ const {history, location} = this.props; if(location.state === undefined){ history.push("/"); } } //... }
-