Props vs State

leitmotif·2021년 7월 31일
0

개념 정리

목록 보기
5/10
post-thumbnail

🧐 개요

리액트 학습 중, Props와 State에 관해 간단하게 정리해둡니다.

📋 Props

Properties의 줄임말.

부모 요소에서 자식 요소에 다시 내려주지 않는 이상 값은 불변.

즉, 읽기 전용으로서 자식 요소에서 값을 변경할 수 없습니다.

function Show(props){
  return (
    <h3>
      Name is {props.name}
    </h3>
  );
}

Show.defaultProps = {
  name : 'asdf'
} 
// 컴포넌트에 Prop에 전달되지 않을 경우를 대비한 기본 값 설정

ReactDOM.render(<Show />, document.getElementById('root'));

위처럼 함수형 컴포넌트에 인자로 전달될 수도 있고,

클래스의 생성자에 인자로 전달되거나 하는 예제가 있을 수 있습니다.

📋 State

Component 내부에서 선언하며, 값 변경 가능.

즉, 가변 데이터이며 Component에 의해 유지된다고 요약할 수 있습니다.

State는 Class 문법과 함께 사용되어야 합니다.

var post = React.createClass({
    getInitialState : function () {
        return {
            title : '테스트타이틀'
        }
    },
    render : function () {
        return (
            <div>
                <p>{ this.state.title }</p>
            </div>
        )
    }
});

위와 같이 createClass와 사용될 수 있겠고

아래처럼 class를 직접 명시하여 사용할 수 있습니다.

import React, { Component } from 'react';

class Temp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '이름'
    }
  }
  nameChange = () => {
    this.setState({
      name: '변경된 이름'
    });
  }
  nameRecovery = () =>{
    this.setState({
      name: '이름'
    });
  }
  render() {
    return (
      <div>
        <h1>State Test</h1>
        <div>이름: {this.state.name}</div>
        <button onClick={this.nameChange}>이름 바꾸기</button>
        <button onClick={this.nameRecovery}>이름 복구</button>
      </div>
    );
  }
}

State를 변경하기 위해서는 setState를 사용해야합니다.
또한 setState가 호출되면 변경을 반영하기 위해 리액트는 리렌더링합니다.

🎯 참고 링크

https://medium.com/@yms0214/react-3-props-%EC%99%80-state-cf8cbf37d0e7
https://velopert.com/3486 :: immutable.js 사용법

profile
[ ]-vation. 일상에 빗대 공감하고, 동기를 쥐어주는 개발자가 되고 싶습니다.

0개의 댓글