[React] Stateful / Stateless

이번 시간에는 상태가 있는 Stateful Component 와 상태가 없는 Stateless Component에 대해 알아보겠다.

 

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 {

   /*
   // 더이상 사용할 필요가 없는 샘플 요소
   constructor() {
      super();
      this.state = {
        count: 1
      }
   }
   */

    state = { count: 1 };
    
    handleCount(value) {
       this.setState((prevState) => ({ count: prevState.count+value}));
    }
    
    render() {
       // 생략
    }
}

1-1. 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() 함수를 통해 전달하고,

상부에 선언된 Component function에서 props를 통해 전달받는다.

 

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

 

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

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

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

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

즉 쉽게 말해 변수를 특수하게 객체화해서 실시간으로 괸라한다는 것을 기반으로 State 개념을 이해하면 더욱 쉽게

사용할 수 있을 것이다.

 

3. 참조링크

• [React] Stateful / Stateless

[React] Stateful / Stateless