2021_05_07

유지원·2021년 5월 7일

TIL - React State, Lifecycle

1. React State

리액트에서의 state는 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다.
반면에 props는 외부(부모 컴포넌트)로부터 전달받은 값을 말한다.

state: 컴포넌트 내부에서 변화하는 값
props: 외부로부터 전달받은 값

또한 props와는 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메소드를 이용해서 변경해야 한다.

왜냐하면 리액트의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 않기 때문이다.

아래의 예시를 보고 props와 state의 사용을 익혀보자.

(1) props의 사용

function App() {
  return (
    <div calssName="App">
      <Twittler name="나의 새 트윗"/> //8번째 줄에서 작성한 Twittler 라는 함수를 부른다.
    </div>
  );
}
function Twittler(props) { // 4번째 줄에서 함수를 부를 때 전달인자로 넘겨준 데이터(name)을 props로 받는다.
  return(
    <li>
      <div>{props.name}</div> //props.name === "나의 새 트윗"
    </li>
  )
}

앞서 props는 '외부로부터 전달받은 값' 이라고 했다. Twittler 함수 입장에서는 부모 컴포넌트인 App에서 Twittler를 부르면서 name 이라는 props를 전달해주었다.

(2) state의 사용

//state를 갖는 컴포넌트를 만들기 위해서는 함수 컴포넌트가 아닌 클래스 컴포넌트로 만들어야 한다.
class ToggleSwitch extends React.Component { 
  constructor(props) { //생성자
    super(props); //부모 컴포넌트가 보내준 props를 받는다.
    this.state = {isOn: false}; //생성자 안에서 this.state를 이용해서 기본 상태를 지정한다.
    this.handleClick = this.handleClick.bind(this); // 이벤트 할당시 바인딩을 해주어야 한다.
  }
  handleClick() {
    this.setState(state => ({ //state 값을 변경하기 위해 setState 메소드를 이용한다.
      isOn: !state.isOn //ON이면 OFF로, OFF면 ON으로 상태를 변경한다.
    }));
  }
  render() {
    return <h1><button onclick={this.handleClick} ~~/*중략*/~~ </h1>
  }
}

5번째 줄에 작성했듯이 이벤트 연결 시 반드시 바인딩을 해주어야 한다.
그 이유는 바인딩을 해주지 않으면 render 메소드에서 this.handleClick 함수를 호출했을 때 함수의 this가 window나 undefined가 되어버리기 때문이다. 따라서 window나 undefined에는 setState 메소드가 없기 때문에 this.setState 호출 시 에러가 발생한다.

쉽게 말해 this.handleClick이 실행되는 순간 this.setState가 실행되는데 이때 this는 window 또는 undefined이기 때문에 에러가 발생한다.

2. Lifecycle

리액트 컴포넌트에는 Lifecycle(생명주기)가 있다. 예를들어 컴포넌트가 생성될 때, 새로운 상태를 가질 때, 화면에 사라지기 전 등 다양한 순간들이 있을 수 있다. 또한 이러한 순간이 발생할 때마다 컴포넌트는 새로 렌더링(render) 된다. (화면에 사라지기 전 제외)