React
react는 JavaScript 라이브러리로써 사용자 인터페이스를 만들기 위해 사용된다
JSX
JSX는 자바스크립트의 확장 문법으로 dom에 그려질 ui가 어떻게 생겼는지를 설명하기 위한 문법이다 JSX는 엄연히 자바스크립트 코드이기 때문에 자바스크립트 객체로서 다루어 진다. JSX는 react에서 엘리먼트를 생성한다.
const element = <h1>Hello, world!</h1>;JSX사용법
JSX를 사용하는 방식은 HTML작성과 비슷한다 JSX를 사용하기 위해서 몇가지 규칙을 지켜야한다.
- 감싸인 요소. : JSX를 리턴할 때에는 꼭 하나의 부모로 이루어진 부모로 반환을 해야한다
render(){
return(
<div>
<h1> hello</h1>
<h2> h2</h2>
</div>
)
}위와 같이 하는 이유는 그것을 visual dom에서 컴포넌트의 변화를 쉽게 감시할 수 있기 때문이다.
- 자바스크립트 표현 : JSX 내부에서 자바스크립트 코드를 작성하고 싶다면 { } 로 감싸서 사용하면된다.
render(){
return(
<div>
<h1> hello</h1>
<h2> {1+2}</h2>
</div>
)
}- if 대신 조건부 연산 : 자바스크립트 표현을 사용할 수 는 있지만 조건부 연산을 하기 위해서 삼항연산자를 이용해야한다
class TestApp extends React.Component {
render() {
const text = 'are you?';
const condition = true;
return (
<div>
<h1>hello react</h1>
<h2>{text}</h2>
{condition ? '참' : '거짓'}
</div>
);
}
}- class 대신 className을 사용한다 : html 에서는 클래스 이름을 지정하기 위해서는 class를 사용했지만 JSX에서는 className을 사용한다.
props
props는 properties의 줄임말로 컴포넌트의 속성을 정의할 때 사용하는 요소이다.
- JSX 내부에서 props를 사용할 때
class TestApp extends React.Component {
render() {
return (
<div>
<h1>this.props.name</h1>
</div>
);
}
}
function TestAppFn(props){
return (
<div>
<h1>props.name</h1>
</div>
);
}- 컴포넌트에서 props 값을 설정 할 때
class App extends React.Component {
render() {
return (
<div>
<testApp name="lee">
</div>
);
}
}state
props는 자신의 부모의 영향을 받아서 설정되고 또 이는 읽기 전용이기 때문에 수정이 될 수 없다 컴포넌트 내부에서 값을 사용하고 업데이트 하기 위해서는 state를 사용해야한다.
State 초기값 설정
state는 항상 객체로 초기화해야한다. class형식의 컴포넌트에서는 constructor내부에서 초기화 해줘야한다.
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = { age: 19 };
}
render() {
const text = 'are you?';
const condition = true;
return (
<div>
<h1>hello react</h1>
</div>
);
}
}State 랜더링 하기
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = { age: 19 };
}
render() {
const text = 'are you?';
const condition = true;
return (
<div>
<h1>hello react{this.state.age}</h1>
</div>
);
}
}State 업데이트 하기
state를 업데이트하기 위해서는 setState메소드를 사용해야한다. 직접 this.state에 할당하는 방식을 사용한면 안된다.
class TestApp extends React.Component {
constructor(props) {
super(props);
this.state = { age: 19 };
}
clickEvent = () => {
this.setState({
age: this.state.age + 1,
});
};
render() {
return (
<div>
<h2>test</h2>
<h1>hello react {this.state.age}</h1>
<button onClick={this.clickEvent}>+1</button>
</div>
);
}
}life cycle (생명주기)
모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 라이프사이클은 랜더링 되기 전 부터 페이지에서 사라지는 과정까지가 존재한다.
라이프사이클 메서드의 종류는 총 열가지 이다. 나누는 기주는 아래와 같다
- 접두사
Will 접두사가 붙은 메서는 어떤 동작을 하기 전이고
Did 접두사의 경우 어떤 작업을 작동시킨 후이고
- 카테고리
- 마운트 : dom이 생성되고 웹 브라우저 상에 나타나는 것을 말한다
- 업데이트 : props가 바뀔 때, states가 바뀔 때, 부모가 리렌더링, 강제 트리거 경우에 업데이트 된다.
- 언마운트 : 마운트의 반대과정 dom에서 제거되는 것을 말한다
functional component vs. class component
컴포넌트를 나타내는 방식으로는 두가지가 있다.
class
class TestApp extends React.Component {
render() {
return (
<div>
<h1>this.props.name</h1>
</div>
);
}
}functional
function TestAppFn(props){
return (
<div>
<h1>props.name</h1>
</div>
);
}
/// 이와 같이 짧게도 사용이 가능하다
let TestApp=(props)=>(
<div>
<h1>props.name</h1>
</div>
)위 두가지 방식에는 몇가지 차이가 있다
- 함수형 컴포넌트가 클래스형 컴포넌트보다 메모리 소모량이 적다.
- 함수형 컴포넌트가 클래스형보다 속도가 조금더 빠르다
- 함수형 컴포넌트는 state,라이프사이클 API 사용 할 수 없다(hook가 도입되기 전에)
일반적으로 state와 라이프 사이클 메소드를 사용해야 되면 클래스 컴포넌트를 사용한다.
