React를 학습하면서 주요 개념 및 내용을 정리 해보려고 한다.
개념
SPA(Single Page Application)
- 단일 페이지로 구성된 웹 어플리케이션을 말하며, 화면 전환 시 마다 새로운 페이지를 로드하는게 아닌
필요한 데이터만 REST API 서버로 부터 JSON으로 전달 받아 동적으로 렌더링한다.
Rendering
- html ,css, JavaScript 등 개발자가 작성한 문서를 브라우저에 뿌려주는 과정을 말한다.
DOM 과 Virtual DOM
- DOM은 HTML, XML 문서의 프로그래밍 인터페이스이며, javascript에서 웹 콘텐츠를 동적으로 제어할 수 있게 중간에서 인터페이스 역할을 한다.
- Virtual DOM은 DOM의 가벼운 복사본과 비슷하며, 수정사항이 발생하면 Virtual DOM에 적용 이후 달라진 부분만 DOM에게 한 번에 전달하여 한 번만 렌더링을 진행한다.
JSX
1. JSX란?
Javascript 안에서 HTML 문법을 사용해 view를 구성할 수 있게 도와주는 Javascript를 확장한 문법이다.
2. JSX 문법
1) JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
1
2
3
4
5
6
7
|
const name = 'test';
const element = (
<h1> Hello, {name} </h1> ); ReactDOM.render(
element,
document.getElementById('root')
);
|
cs |
- formatName(user) 함수를 element 의 JSX 안에서 사용 가능하다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function formatName(user) {
return user;
}
const user = 'test';
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
|
cs |
2) class 대신 className 사용해야 된다.
- javascript 에서는 class라는 예약어를 사용하고 있기 때문에 className을 선언해야 된다.
|
1
2
3
4
5
|
const element = (
<h1 className="hello">
Hello, world!
</h1>
);
|
cs |
3) 태그를 닫아야 된다.
- input, br 태그 등.. /> 로 닫아야 된다.
|
1
2
3
|
const element = (
<div className="hello" />
);
|
cs |
4) 하나의 최상위 태그만 반환해야 한다.
- 컴포넌트 한개당 하나의 최상위 태그로 감싸줘야 된다.
|
1
2
3
4
5
6
|
const element = (
<div>
<div>1</div>
<div>2</div>
</div>
);
|
cs |
라이프 사이클
컴포넌트 생성
1) constructor()
- 컴포넌트 클래스의 생성자로 메서드를 바인딩 하거나 state 값을 초기화하는 용도로 사용
2) render()
- 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소를 반환
3) componentDidMount()
- 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출
컴포넌트 업데이트
1) render()
2) componentDidUpdate()
- 컴포넌트 업데이트 작업이 끝나고 리렌더링 이후에 호출되는 함수
컴포넌트 제거
1) componentWillUnmount()
- 컴포넌트가 제거되기 직전에 호출되는 함수
Props, State
Props
properties의 줄임말이다. 부모 컴포넌트에서 자식 컴포넌트에게 어떠한 값을 전달해줘야 할 때 사용하며
함수의 매개변수 같은 역할을 한다. 또한 props 는 읽기 전용이기 때문에 자식 컴포넌트에서 수정하면 안된다.
Props 예제
- App 컴포넌트에서 Welcome 컴포넌트에 name props 객체를 전달하는 예제이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
class Welcome extends React.Component {
render(){
return (
<h1>Hello, {props.name}</h1>;
);
}
}
class App extends React.Component {
render(){
return (
<div>
<Welcome name="Sara" />
</div>
);
}
}
|
cs |
State
컴포넌트 자기 자신이 가지고 있는 값이며, 함수 내에 변수 같은 역할을 한다. 변경이 필요한 경우 setState() 함수를 통해 값을 변경해줄 수 있다.
State 예제
- constructor()에서 state 값을 초기화 이후 handleClick 함수에서 setState() 함수를 통해 state 값을 변경하는 예제이다.
|
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
|
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
number: 0
};
}
handleClick = () => {
this.setState({
number: this.state.number + 1
});
}
render() {
return (
<div>
<h2>{this.state.number}</h2>
<button onClick={this.handleClick}>클릭</button>
</div>
);
};
}
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
|
cs |
참고
https://ko.reactjs.org/docs/getting-started.html
https://lktprogrammer.tistory.com/130
https://www.nextree.io/003-react-state/
https://linked2ev.github.io/devlog/2018/08/01/WEB-What-is-SPA/
Comment