[React] Stateful / Stateless

1-1. React의 Stateful Component

말그대로 State가 있는 Component를 말한다.

• class에서 this 인스턴스를 통해 state에 접근하고 상태관리

CASE A. class선언후 생성자 인스턴스에서 this를 통한 state관리

// Here is an excerpt from the counter example
constructor(props) {
  super(props);
  this.state = { count: 0 };
}

CASE B. React Component class 중 useState module을 사용하여 상태관리
※ State는 hook의 일종으로,
hook을 활용하여 복잡한 lifecycle 및 class 생성자 구현없이 state 괸리가 가능하다.

class App extends Component {
   
  /*
  // Not required anymore
  constructor() {
      super();
      this.state = {
        count: 1
      }
  }
  */
   
  state = { count: 1 };
   
  handleCount(value) {
      this.setState((prevState) => ({count: prevState.count+value}));
  }
 
  render() {
    // omitted for brevity
  }
}

1-2. React의 Stateless Component

말그대로 State가 없는 Component를 말한다.

별도의 State 관리없이, 함수 logic 및 비동기처리만으로 상태관리의 life cycle을 적용하는 프로그래밍을 React의 Stateless 프로그래밍이라 한다.

하지만 중요한 점은 이러한 stateless 방식의 lifecycle은 권장되지 않는다.

• 너무 복잡하다.
• 함수로 비동기처리를 구현하고 상태관리하는 것 자체가 어렵다.

그렇기에 Component - State - Redux가 고안된 것이다.

최신 기술 트렌드를 최대한 활용해가면서 logic을 구현해보자.
괜히 많이 사용하는 것이 아니다.

2. (참조) props vs State

• props
  Component 기반의 logic에서 Component에게 전달하는 전달인자이자,
  해당 Component에서 data를 받기위한 인자이다.

아래 코드를 살펴보자.

const Component = styled.div`
  display : ${props => props.isLoaded? 'block' : 'none'};
  color: ${color};
`

function App() {
  return (
    <Wrapper isLoaded>
      <Component isLoaded>complete</Component>
    </Wrapper>
  )
}

위 styled-component 코드에서 Component 컴포넌트는 isLoaded라는 인자를 App()함수를 통해 전달하고,
상부에 선언된 Compoennt function에서 props를 통해 전달받는다.

즉, isLoaded라는 data를 전달할 때 props라는 인자를 통해 전달되고, 전달받는 형식으로 logic이 구현된다.

쉽게 말하면 해당 컴포넌트를 통해 전달되는 data는 props라는 객체가 담고있다고 생각하면 쉬울 것이다.

• State
  실시간 데이터관리를 위해 데이터를 "상태관리를 위해 특별하게 마련된 State 객체"에 넣고, 상태변수의 속성을 부여한 변수이다.

상태관리는 기존의 데이터를 건드리는 개념이 아니다.

• 기존의 데이터 수정이 필요할 경우,
  해당 데이터의 객체를 받아와 그 객체안의 데이터를 바꾼다.
• 바꾼 데이터를 State 객체를 통해 새로운 객체나 배열로 전환하여 해당 데이터를 실시간으로 관리한다.

즉 쉽게 말하면 변수를 특수하게 객체화하여 실시간으로 관리한다는 것을 기반으로
State 개념을 이해하면 더 수월하다.

3. 참조링크

patterns / 다양한 design 속성의 비교
https://code.tutsplus.com/ko/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541