React로 영화 웹 서비스 만들기 강의 정리 02
ReactJS Series
클래스형 컴포넌트
이전 시간에는 함수형 컴포넌트를 만들고 JSX를 활용하는 방법에 대해서 배웠다. 오늘 정리할 내용은 ES6의 문법 바탕인 클래스형 컴포넌트이다. extends 라는 확장자(?)를 사용하여 React가 기본적으로 가지고 있는 React.Component의 확장된 클래스를 만드는 것이다.
React.Component가 기본적으로 가지고 있는 모든 속성을 이어 받고, 내부의 모든 요소를 사용할 수 있다. App 이라고 하는 클래스형 컴포넌트의 선언은 아래와 같이 한다. render() 함수는 말 그대로 JSX를 랜더링 하는 함수이다.
class App extends React.Component {
// 실행문
}
export default App;
유저의 사용, 브라우저 상태 등에 따라서 데이터가 유동적으로 변경되는 경우
이전 블로그에서는 하드코딩 된 객체의 데이터를 불러와서 props 속성을 이용해서 JSX에 활용하는 방법을 배웠다. 이미 내장된 데이터가 변경되지 않는 경우에는 위의 방법을 사용할 수 있겠지만, 현대의 웹 앱에서 그런 경우는 거의 없다. 그래서 우리는 유동적으로 변하는 데이터를 다룰 수 있어야 한다.
그래서 React에서는 state 라고 하는 객체 요소를 사용한다. state라는 객체에는 변경이 될 요소가 들어있다. 선언된 state는 데이터를 저장하는 역할도 하지만, setState()라는 함수를 이용하여 render() 함수를 자유롭게 호출, 멈춤 할 수 있다.
class App extends React.Component {
state = {
count: 0
}
render() {
return <div>
<h2> Count is : {this.state.count} </h2>
<button>Plus</button>
<button>Minus</button>
</div>
}
}
render 함수는 기존의 함수형 컴포넌트를 사용하는 것과 살짝 비슷하다. 하지만, this를 통해서 class 컴포넌트 내부의 state 객체를 찾고, state 내부의 데이터를 사용하는 것을 볼 수 있다.
button 요소에 클릭 이벤트 부여하고 이벤트 핸들러 함수 작성하기
현재 위에 제시된 코드로는 내부의 state 객체의 count 값을 수동으로 변경해주어야 브라우저에 원하는 값이 나온다. 즉, 사용자의 이벤트로는 데이터 변경이 힘들다는 뜻이다. 그래서 우리는 state를 유동적으로 변경하고 (state를 새롭게 정의한다고 생각하면 좋다.), render 함수를 새롭게 호출 할 수 있는 setState() 함수를 사용해야 한다.
plus = () => {
this.setState({ count: this.state.count + 1 });
}
minus = () => {
this.setState(el => ({ count: el.count - 1 }));
}
render() {
return <div>
<h2> Count is : {this.state.count} </h2>
<button onClick={this.plus}>Plus</button>
<button onClick={this.minus}>Minus</button>
</div>
}
위의 plus, minus 이벤트 핸들러 함수 선언에서 각각 차이가 있는 것을 볼 수 있다. 외부 상태에 의존하지 않고 효율적으로 state를 새롭게 세팅할 수 있는 코드는 minus() 함수의 코드이다. plus 함수는 this 키워드를 사용하여 직접적으로 내부의 state에 접근하기 때문이다.
자바스크립트로 DOM을 다룰때에는 전역이나 html 내부에서 해당 객체를 찾고 이벤트 함수를 각각 붙여줘야 했다. 하지만 리엑트 컴포넌트는 기본적으로 onClick 이벤트를 내장하고 있는 것을 볼 수 있다.
Compoenet life cycle
리엑트 컴포넌트에서는 render 함수가 실행되기 이전에 구성되는 요소가 있고, 랜더링이 마무리 된 다음 작동하는 함수가 있다. 니코쌤은 아래의 함수만 일단 잘 기억하라고 알려줬다.
// render 함수 이후에 생성(mount)된다.
componentDidMount() {}
// render 함수의 작동으로 컴포넌트가 업데이트 되었다.
componentDidUpdate() {}
// render 함수 작동 이후,
// 유저가 페이지를 떠나는 상황처럼 컴포넌트가 사라질 때 작동한다.
componentWillUnmount() {}