[리액트 파보기] (4) Main Concept 2

5. state and lifecycle

state는 컴포넌트 안에서 정의된 오브젝트이다.

render 함수가 호출되려면 타이머를 정해두고

계속해서 업데이트가 되게 해주어야 하는데

이러한 번거로움을 줄이기 위해 업데이트를 감지하는 오브젝트인

'state'가 만들어졌다.

 

state와 props 의 차이는?

state는 컴포넌트 안의 데이터이기 때문에

컴포넌트 내부에서 컨트롤이 가능하고,

props는 컴포넌트 밖에서 주어지는 데이터(정보)임으로

상황에 따라 주어진 데이터를 받아야 할 때 사용한다.

 

state 에서 업데이트가 감지되면

render 함수가 호출되고 원하는 UI 컴포넌트를 출력할 수 있다.

 

하지만, 리액트에서는 state를 직접적으로 수정하는 것을 권장하지 않는다.

그 이유는 오브젝트 불변성과 관련이 깊다.

https://malang-e.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%8C%EB%B3%B4%EA%B8%B0-2-Javascript%EC%9C%84%EC%97%90%EC%84%9C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94-react

[리액트 파보기] (2) Javascript위에서 동작하는 react

 

component를 상속하여 사용하는 경우에는

render 할때마다 자동으로 호출되는데

모든 컴포넌트를 매번 호출하는 것은 자원의 낭비이기 때문에

PureComponent를 상속받아서 내부의 shouldComponentUpdate 함수가

false를 리턴하면 render 하지 않고, true를 리턴하면 render 함수가 호출된다.

 

리액트는 shallow comparison(얕은 비교)를 함으로,

spread operator[...]를 활용하여 오브젝트 껍데기를 복제하여 사용해야

오브젝트가 변경되었다고 인지한다.

오브젝트 껍데기는 그대로 두고 내부의 아이템 값만 수정한다면

기존의 오브젝트와 동일하게 인지함으로 shouldComponentUpdate 함수가 

false를 리턴하게 되고 render 함수가 호출되지 않는다.

 

위의 이유 때문에 state 안의 데이터를 직접 변경하는 것은 좋지 않고,

새로운 오브젝트를 복제하여 데이터를 변경하는 방식을 사용한다.

 

LifeCycle이란?

리액트에서 새로운 컴포넌트가 등록되거나, 삭제될 때 등등 특정 상황에서

동작하는 함수를 생성할때 활용한다.

componentDidMount, componenetWillUnmount, etc.

위의 라이프사이클 메소드를 사용하면

해당하는 상태에서 원하는 동작을 하도록 UI를 설계할 수 있다.

 

mounting은 DOM에 새로운 오브젝트가 render 될때를 말하고

unmounting은 DOM에서 오브젝트가 삭제될때를 말한다.

 

state를 올바르게 업데이트하려면 setState() 메소드를 활용해야 한다.

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

setState는 함수이기 때문에 인자로 state 또는 props를 받아서

사용가능하다.

 

6. Handling Events

리액트는 자체적인 이벤트 클래스가 존재하는데

DOM 요소의 이벤트와 비슷하게 구성되어 있지만

synthetic event로 한번 더 감싸서 데이터를 전달한다.

 

또 다른점은 return 값으로 form 함수가 존재할 때

type이 submit인 버튼이 있으면 자동으로 페이지가 새로고침 되는데

그것을 방지하는 preventDefault 함수를 반드시 호출해주어야 한다는 점이다.

 

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

여기서, e는 synthetic event이고, W3C 스펙과 동일하기 때문에

크로스브라우징을 염려하지 않아도 되지만,

기존의 이벤트와 몇가지 다른 가이드가 있다.

 

addEventListener를 사용하는 대신에 

onClick 시에 해당하는 함수를 embedding 하여 호출해준다.

 

next)

Main Concept 의 7~12번 까지의 내용은

이어지는 프로젝트와 함께 정리해보자.