React 기초 - state와 클래스형 컴포넌트

# 이 글은 책 "Do it! 클론 코딩 영화 평점 웹서비스"를 바탕으로 쓴 글입니다.

 

 

state

 

state는 동적 데이터를 다룰 때 사용한다.

 

state는 클래스형 컴포넌트에서 사용할 수 있는 개념이다.

 

ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

state와 생명주기에 대해 나와 있는데 생명주기는 이따가 더 자세히 알아보자.

 

먼저 state를 사용하려면 클래스형 컴포넌트를 알아야한다.

 

다음 코드를 보자.

class App extends React.Component { }

뭔가 익숙한 게 보인다.

 

class와 extends 모두 너무 익숙한 코드들이다.

 

class의 상속에 관한 얘기는 여기서 설명하긴 너무 지루하고 자바 강의시간에 잘 배우고 왔기 때문에 넘어가자.

 

어쨌든 클래스형 컴포넌트가 되려면 '해당 클래스가 React가 제공하는 Component 클래스를 반드시 상속받아야 한다!'

 

이렇게 App이란 클래스가 React.Component를 상속받아 '클래스형 컴포넌트'를 만들었다.

 

 

여기서 생각해봐야 할 것이 또 있다.

 

원래 코드(이전 포스팅)를 보면 App은 function App() -> function, 즉 함수로 만들어져 있었기 때문에 JSX를 그냥 return 하면 되었다.

 

하지만 이제 App은 클래스형 컴포넌트, 즉 class 이기 때문에 return을 할 수 없다.

 

그렇기 때문에 render()란 함수를 사용하여 클래스임에도 JSX를 반환하게 한다.

 

class App extends React.Component {
    render(){
    	return <h1> React 너무 어려워요! </h1>;
    }
}

일반 함수에서 return 하는 것과 똑같은 효과를 준다.

 

이해하는데 어렵지는 않았다.

 

이제 본격적으로 state를 다뤄보자.

 

state를 사용하는 방법은 다음과 같다.

 

state = {
    isLoading: true,
    movies:[], // 영화 객체들이 저장되어 있는 배열
  };

state를 다른 언어와 비교해보자면 클래스 내부 변수? 정도로 생각하면 될 것 같다.

 

대신 state는 객체 형태의 데이터란 것을 확인하고 가자!

 

만약 클래스의 다른 함수에서 state를 변경하려면 어떻게 될까?

 

아래의 코드를 render() 함수에 넣어서 react app을 실행시켜보자.

this.state.isLoading = false;

 

화면은 정상적으로 출력되지만 뭔가 내가 짠 코드의 흐름대로 흘러가진 않는다.

 

혹시나 해서 콘솔 창을 열어보면

 

 

이런 경고창이 떠 있는 것을 확인할 수 있다.

 

조잡한 영어 실력으로 해석해보자면

"state를 바로 바꾸지 말고 setState()란 함수를 사용해서 바꿔!" 정도일 것 같다.

 

아.. 뭔가 익숙한 내용이다.

 

class의 private 변수에 접근하는 느낌이 솔솔 든다.

 

어쨌든 원하시는 대로 setState() 변수를 사용하면 오류는 사라지고 정상적으로 출력이 된다.

 

 

 

클래스형 컴포넌트의 생명 주기

 

생명주기를 공부하기 전에 먼저 알아야 할 함수들이 있다.

 

바로 constructor() 함수, componentDidMount() 함수 render() 함수이다.

 

constructor() 함수는... 얘도 어디서 많이 봤다 그죠?

 

생성자라고 생각하면 아주 편할 것 같다.

 

당연히 가장 먼저 실행된다.

 

다음으로 componentDidMount() 함수는 새롭다.

 

이 친구는 render() 함수가 실행된 후 실행된다.

 

함수 이름을 해석해보자면 component가 Mount 된 후, 즉 이 시기에 실행되는 함수란 이야기이다.

 

이렇게 constructor(), render(), componentDidMount() 세 함수를 React에서는 Mount로 분류하는 생명주기 함수라고 한다.

 

 

 

이 외에도 Update로 분류되거나 Unmount로 분류된 componentDidUpdate() 함수, componentWillUnmout() 함수 등이 있는데 이들은 나중에 더 자세히 알아보자.

 

 

이렇게 간단하게 React의 state와 클래스형 컴포넌트 개념을 알아보았다.

 

React를 공부하지 않은 상태로 막무가내로 클론 코딩을 진행하다 보니 아무래도 뭔가 허전한 느낌이 많이 든다.

 

이번 챕터를 공부하며 React를 빠른 시간 내에 공부를 시작해야겠다는 생각이 들었다.