[Reactjs] 리액트 정리 3편 : state & props

안녕하세요? 정리하는 개발자 워니즈 입니다. 이번시간에는 리액트를 주로 사용하면서 봐왔던 state와 props에 대해서 정리를 해보려고 합니다. 아시다시피 처음 React를 공부하게 되면 제일 처음 배우게 되는 개념이지만, 필자 같은 경우 바로 소스 개발을 들어가다 보니 정확하게 개념을 인지하지 못하고, 바로 실전으로 보면서 익히게 되었습니다.

그래서 이번기회에 이 개념에 대해서 정확하게 정리를 해보는 시간을 갖겠습니다.

지난 글들은 아래를 참고 해주시면 됩니다.

• 리액트 정리 1편 : redux project 소개(1)
• 리액트 정리 2편 : redux project 소개(2)
• 리액트 정리 3편 : state & props
• 리액트 정리 4편 : S3 웹호스팅
• 리액트 정리 5편 : 소스 배포 – github actions
• 리액트 정리 6편 : 람다 이미지 리사이징
• 리액트 정리 7편 : CDN 적용
• 리액트 정리 8편 : 도메인 연결
• 리액트 정리 9편 : Codepipline을 통한 배포

1. Props란 무엇인가요?

사실 Props라는 이름에서도 유추가 되듯이, Properties라는 의미를 함축하고 있습니다. 어떤 속성값을 이야기하는 것이라고 생각하시면 됩니다.

• Props는 자식 컴포넌트로 전달됩니다.

Props는 자식 컴포넌트에게 전달이 됩니다. 아래 예제에서 보이듯이, Welcome 컴포넌트에게 name의 props값을 전달하였고, 그것이 노출되고 있습니다.

class Welcome extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}
const element = ;

쉽게 이야기하면, 자바스크립트 function에서 파라미터라고 생각하면 됩니다.

function Welcome(props) {
  return 
Hello {props.name}
;
}

이러한 Props에는 Default 값을 지정할 수 있습니다. 아래와 같이 특정 값이 지정이 되지 않으면, defaultProps의 값이 셋팅이 되면서, 화면에 노출이 됩니다.

class Welcome extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}
Welcome.defaultProps = {
  name: "world",
};

• props는 변경이 되지 않습니다.

props는 immutable 하다고 말합니다. 즉, 변경이 일어나지 않기때문에 불변하다고 할 수 있습니다. Props는 하위 컴포넌트로 전달이 되기 떄문에, 변경을 할수가 없고, 오로지 redering하는 컴포넌트에서는 이 props를 가져다가 사용합니다.

2. State란 무엇인가요?

State같은 경우 그 이름에서 나타나듯이 상태를 의미합니다. Props와 마찬가지로 State역시 컴포넌트에 관한 정보를 갖고 있습니다. 그러나, 정보의 종류와 그것이 다뤄지는 방식에서 차이가 있습니다.

• 그럼 언제 State를 사용하는 것인가요?

컴포넌트 자체적으로 액션이 가해져서 렌더링에 변화를 줄 때, state를 사용합니다. 아래에서 보시면, 실질적으로 reder()함수에서 화면을 노출 시켜주고 있습니다.

Button 클릭에 따라, 몇번을 클릭했는지를 보여주는 Component 입니다.

1. 버튼을 클릭하게되면, updateCount 함수를 호출합니다.
2. 이전 상태(prevState의 count값)에서 +1 을 수행합니다.
3. 해당 값을 state로 지정합니다.(setState)
4. 업데이트 된 상태를 다시 렌더링 합니다.(render)

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }
updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }
render() {
    return ( this.updateCount()}
            >
              Clicked {this.state.count} times
            );
  }
}

• 상태는 컴포넌트 내에서 생성이 됩니다.

constructor() {
  super();
  this.state = {
    count: 0,
  };
}

컴포넌트가 초기에 생성이 되면서, constructor함수를 호출합니다. 이 함수내에서 컴포넌트에 대한 초기 상태값을 지정할 수 있습니다.

• 상태는 변경이 가능합니다.

updateCount() {
  this.setState((prevState, props) => {
    return { count: prevState.count + 1 }
  });
}

위에서 보신것처럼, 컴포넌트에 대한 액션을 통해서 상태값 변경이 가능했습니다. state의 값은 property로 접근해서 직접 변경하면 안 되고, 반드시 setState()를 통해 변경이 되어야 합니다.

3. 마치며..

props와 state는 reactjs에서 가장 기본이 되는 개념입니다. reactjs를 통해서 상태에 따라 render해주는 부분이 시시각각 바뀌게 되는 것인데, 매번 상태를 변경하는 코드를 집접 넣어줘야되고, 그 상태를 render해주는 코드를 다시금 붙여주고 하는 부분이 상당히 귀찮아졌습니다.

그렇게 해서 reactjs에 redux인 상태관리 개념을 도입하게 된 것입니다. redux는 reactjs를 떠나 독립된 라이브러리 이며, 상태관리를 해주는 도구라고 생각하시면 됩니다. reactjs 본연의 view 라이브러리와 상태 관리를 해주는 redux가 만나 생산성 있는 어플리케이션 개발을 진행할 수 있습니다.

다음 이시간에는 redux 본연의 개념에 대해서 좀더 심도 깊게 정리를 해보도록 하겠습니다.

[출처]

itIsMadhavan, reactjs-props-vs-state

[wonism, Props와 State](