React 2
state에 대해서 알아보자면 한번 배웠던거지만 상태끌어올리기 같은게 아직 익숙하지 않습니다...
state란 컴포넌트의 특정 상태를 기억하여 화면에 반영하고, 상태가 사용자에 의해 변경되면 다시 화면이 변경되는 기능을 하기위해 존재하는 객체이며 컴포넌트 안에서 관리된다고합니다. 어떻게 관리하느냐 state안에있는 데이터는 변하기 떄문에 내가 바꿀 데이터를 state안에 넣어주면 됩니다.. 여기서 컴포넌트는 function component와 class component가 있고 클래스 컴포넌트는 render메서드에 넣어서 실행합니다..
class App extends React.Component {
state = {
isLoading : true,
movies : []
}이런식으로 구현을할수있고 state에 중요한게 setState라는게 있는데 이것은 class안에 포함이 되며 호출을하게 되면 react는 state를 refresh하고 또한 render function을 호출됩니다.. 중요한 점은 매순간 내가 setstate를 호출할 때마다 react는 새로운 state와 함께 render function을 호출합니다.
이못지않게 중요한개념은 Component Life Cycle입니다. React component에서 react class component는 단순히 render 말고 더 많은 걸 가지고 있습니다. 이들은 life cycle method를 가지는데, 기본적으로 react가 컴포넌트를 생성하고 없애는 방법입니다. 컴포넌트가 생성될 때 render 전에 호출되는 function이 있고 컴포넌트가 render 된 후 호출되는 다른 function들이 존재합니다. 평소에 궁금했던 DidMount 를 보면 constructor로 생성하여 호출되고 componentDidmount로 렌더를 한후 실행됩니다.
또, 함수에서 클래스로 변환할수있는데 다섯단계로 나뉜다. 1.React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.
2.render()라고 불리는 빈 메서드를 추가합니다.
3.함수의 내용을 render() 메서드 안으로 옮깁니다.
4.render() 내용 안에 있는 props를 this.props로 변경합니다.
5.남아있는 빈 함수 선언을 삭제합니다.
여기서 hook이 나옵니다 함수형 컴포넌트에서도 클래스형 컴포넌트의 작업들을 하기위해 나온 개념입니다 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결할수있고 특히 react를 함수 중심으로 사용할수있게 되었다는 것입니다.
두가지 컴포넌트의 차이는 아래와 같습니다.
import React from "react";
class App extends React.Component {
render() {
return (
<div style={{ textAlign: "center" }}>
<div style={{ fontSize: "100px" }}>0</div>
</div>
);
}
}
export default App;
이처럼 기본 코드를 예로들고 숫자를 state로 선언을 한뒤 숫자를 1씩증가시키는 버튼과 1씩 감소시키는 버튼을 만들어봅시다.
import React from "react";
class App extends React.Component {
state = {
number: 0
};
render() {
return (
<div style={{ "textAlign": "center" }}>
<div style={{ "fontSize": "100px" }}>{this.state.number}</div>
<button onClick={this.handleClickIncrement}>더하기</button>
<button onClick={this.handleClickDecrement}>빼기</button>
</div>
);
}
handleClickIncrement = () => {
this.setState(state => ({
number: state.number + 1
}));
};
handleClickDecrement = () => {
this.setState(state => ({
number: state.number - 1
}));
};
}
export default App;숫자를 다루기위해 컴포넌트에 state를 선언하고
더하는 함수 handleClickIncrement에서도 this.setState() 메소드를,
빼는 함수 handleClickDecrement에서도 this.setState() 메소드를 사용했습니다.
그리고 함수형 컴포넌트입니다.
import React, { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
return (
<div style={{ textAlign: "center" }}>
<div style={{ fontSize: "100px" }}>{number}</div>
<button onClick={() => setNumber(number + 1)}>더하기</button>
<button onClick={() => setNumber(number - 1)}>빼기</button>
</div>
);
};
export default App;useState를 사용하여 코드를 많이 줄였습니다. useState은 클래스형 컴포넌트의 state의 선언과 관리를 짧고 직관적인 코드로 가능하게 해주는 hook입니다.
number라는 state과 setNumber라는 state 변경함수를 useState을 통해 선언하였습니다.
클래스형 컴포넌트에서 setState을 사용하여 state을 변경할 때에는 shallow copy로 인해 항상 새로운 객체를 생성해서 전달해줘야하는 불편함이 있었는데,useState을 사용하여 얻은 함수(setNumber)에서는 원하는 값을 인자로 전달하기만하면 됩니다.
0개의 댓글
