Publish to my blog (weekly)

• 함수형 setState가 리액트(React)의 미래이다(Functional setState is the future of React) | vobour 보버 - 블로그형 SNS

  • 그의 트윗을 유의해서 보자. 함수형  setState 쓸 때 ...

    업데이트는 큐(queue)에 쌓이고 추후에 호출 된 순서대로 실행된다. 

    따라서 리액트가 객체를 머지(merge)하는 대신 "여러 함수형 setState 호출"를 만나면 (물론 머지 할 객체가 없다) 리액트는 "호출 된 순서대로"함수를 큐에 넣는다. 

  • 그 후 리액트는 "큐(queue)"의 각 함수를 호출하여 상태를 업데이트하고 이전 상태, 즉 첫 번째 함수형 setState() 호출 이전 상태를 전달한다 (첫 번째 함수형 setState() 인 경우).  만약 첫 번째 함수형 setState() 호출이 아니라면, 큐 내의 이전의 함수형 setState() 호출로부터 최신 갱신된 상태를 전달한다. 

• [React.JS] 강좌 5편 컴포넌트의 State 와 Props 사용하기 | VELOPERT.LOG

  • parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다.
  • props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다
  • 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용합니다
  • state를 사용하는 컴포넌트의 갯수를 최소화 하는 것 을 노력해야합니다
  • 10 개의 컴포넌트에서 유동적인 데이터를 사용 하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는것이 효율적입니다.
  • state 의 초기 값을 설정 할 때는 constructor(생성자) 메소드에서 this.state= { } 를 통하여 설정합니다.
  • state 를 렌더링 할 때는 { this.state.stateName } 을 사용합니다.
  • state 를 업데이트 할 때는 this.setState() 메소드를 사용합니다. ES6 class에선 auto binding이 되지 않으므로, setState 메소드를 사용 하게 될 메소드를 bind 해주어야 합니다.
  • bind 하지 않으면 React Component 가 가지고있는 멤버 함수 및 객체에 접근 할 수 없습니다.
  • this.updateValue = this.updateValue.bind(this);

Posted from Diigo. The rest of my favorite links are here.