[react] state

woo·2022년 4월 25일
0

기능 구현

목록 보기
6/17

react에서 props와 state는 비슷한 듯 보이지만 차이가 있다! 왜 state를 쓰는지 알려면 먼저 props를 알아야한다.

🖐 props란?

props는 부모 컴포넌트의 값을 자식 컴포넌트로 전달할때 사용한다.
props는 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이고, props를 제공하여 컴포넌트를 조작할 수 있게 됩니다.

🖐 state란?

state는 props의 값에 따라 내부의 구현에 필요한 데이터들이다.
state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다.

✔ props vs state 예시

🔽props를 사용했을때

class Subject extends Component {
  render() {
    return ( 
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="Hello World!"></Subject>
      </div>
    );
  }
}

🔽props와 state 사용했을때

class App extends Component {
  constructor(props) {
    super(props);
      this.state={
      Subject:{title:'WEB',sub:'Hello World!'}
    }
  }
  render() {
    return (
      	<div className="App">
        <Subject 
        	title={this.state.subject.title} 
    		sub={this.state.subject.sub}>
        </Subject>
      </div>
    );
  }

화면에 출력되는 내용은 완전히 똑같지만, props 데이터를 사용자에게 노출되는 부분에 직접 적는 것이 아니라 state를 통해 참조했다는 차이가 있다. 다시 말해, 사용자가 알 필요가 없는 데이터를 내부에 숨기는 캡슐화로 사용성을 높일 수 있다!

또한 컴포넌트에 동적인 값(컴포넌트 내부에서 변경할 수 있는 값)을 할당할 수 있다는 장점이 있다!
-> props는 값을 바꾸지는 못한다!(정적) 하지만 state는 setState를 사용해 값을 변경할 수 있다.

➕ 부스트코스 웹프론트엔드 시작하기state참고글을 바탕으로 정리하고 공부한 내용입니다.

profile
🌱 매일 성장하는 개발자

0개의 댓글