Props와 State 개념 정리

 

 

 

1. props (읽기전용)

: 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없음

 

class 인 경우는 this를 사용하여 값을 받음

class Person extends React.Component {
	render() {
    	const {name, age} = this.props; // 이 코드를 사용하지 않으면 {this.props.name}
		return (
        	<div>
            	<h1> 이름 : {name} </h1>
            </div>
            
           )
      }
 }

function 인 경우는 아래와 같이 받음

const Person = ({name,age}) => ( // (props)라고 사용하면 {props.name}
<div>
	<h1> 이름은 : {name} </h1>
</div>
)

props 기본 값 설정 - static defaultProps

import React, { Component } from 'react';

class MyName extends Component {

	static defaultProps = {
    	name: '기본이름'
        }
        
    render() {
    	return (
          <div>
          	안녕하세요. 제 이름은 <b>{this.props.name}</b>
          </div>
       );
    }
 }
 
 export default MyName;

* class Name extends react.component와 class Name extends Component의 차이점

  import React { Component } from 'react' 하여 class Name extends Component 하는 것과 class Name extends React.Component 하는 것은 동일함 -> import 차이

---

 

 

 

2. state(컴포넌트 자기 자신이 가지고 있는 값)

: 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있음

 

setState: state에 있는 값을 바꾸기 위해서는 this.setState를 무조건 거쳐야 하는데, 리액트에서는 이 함수가 호출되면 컴포넌트가 리렌더링 되도록 설계되어 있음, 객체로 전달되는 값만 업데이트를 해줌

객체의 깊숙한 곳까지 확인하지 못함.

 

ex)

state = {
	number: 0,
    level: {
    	kor: 1,
        eng: 0
       }
    }

this.setState({
	level: {
    	eng:2
    }
 })

위와 같이 한다고 해도 eng 값이 업데이트 되지 않음

 

{
	number:0,
    level: {
    	eng:2
    }
 }

위와 같이 기존 level의 객체가 바뀌어버림

 

this.setState({
	number:0,
    level: {
    	...this.state.foo,
        eng:2
    }
 });

... 은 자바스크립트의 전개연산자, 기존의 객체 안에 있는 내용을 해당 위치에다가 풀어준다는 의미. 그 다음에, 우리가 설정하고 싶은 값을 또 넣어주면 해당 값을 덮어쓰게 됨.

 

이러한 작업이 꽤나 귀찮으므로, immutable.js 또는 immer.js를 이용하여 위의 작업을 편리하게 도와줌