React6. state와 불변성

목차

1. state란?
2. 클래스 컴포넌트에 로컬 state 추가하기
3. state 업데이트
4. 하향식 데이터 흐름
5. 불변성 개념

 

 

 

1. state?

• 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수함수처럼 동작해야 한다는 규칙을 위반하지 않고도
• 사용자의 액션, 네트워크 응답 및 다른 요소에 대한 응답으로 시간에 따라 자신의 출력값을 변경 가능

 

 

2. 클래스 컴포넌트에 로컬 state 추가하기

 

1. render() 메서드 호출
2. class constructor()메서드 호출하여 state 초기화 후 props를 기본 constructor에 전달

 

 

class Clock extends React.Component{
	constructor(props){
    	super(props);
        this.state = {date: new Date()};
    }

	render(){
    	return (
        	<div>
            	<h1> hello, world </h1>
                <h2> It is
                	{this.state.date.toLocaleTimeSstring()}.
                </h2>
            </div>
        );
    }
}

ReactDOM.render(
	<Clock />,
    document.querySelector('#root')
)

 

 

 

 

3. state 업데이트

3-1. setState() 메서드

• this.state를 지정하는 것은 state의 초기화이며, state 초기화는 오직 constructo() 매서드 내에서만 가능하다.
• 따라서 state를 업데이트 하고자 하는 경우에는 setState() 메서드를 사용해야 한다.

// 아래의 코드는 컴포넌트를 다시 렌더링 하지 않는다.
this.state.comment = 'hello';


// 컴포넌트 렌더링을 위해서는 setState()를 사용하자
this.setState({ comment: 'hello' });

 

 

 

3-2. state 업데이트는 비동기적일 수 있다.

• React는 성능을 위해 단일 업데이트로 여러 번의 setState() 호출을 처리할 수 있다.
• this.props와 this.sate가 비동기적으로 업데이트될 수 있기 때문에 다음 state 계산 시 해당 값에 의존해서는 안된다.

 

 

 

4.하향식(top-down) / 단방향식 데이터 흐름

4-1. state의 로컬, 캡슐화

• 어떤 컴포넌트도 특정 컴포넌트의 유상태 무상태 여부응 알 수 없고 정의된 컴포넌트 유형(함수/클래스)에대해서도 관심 가질 필요가 없다 > state의 지역화, 캡슐화
• 모든 state는 특정한 컴포넌트가 소유하며, 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 하위에 있는 컴포넌트에만 영향을 미침
• (= state는 소유하고 설정한 컴포넌트 이외의 어떠한 컴포넌트에서도 접근 불가능하다.)
• (=컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달 가능하다.)

 

 

<참고>
props.children을 통해서 자식 뿐만 아니라 자손 컴포넌트에도 props 전달 가능

 

 

5. 불변성 개념

5-1. 데이터 변경의 방법

• 원본 데이터 값 자체를 직접 변경
• 원본 인 불변객체는 그대로 두고 원하는 변경 값을 가진 복사본으로 데이터를 교체

 

5-2. 불변성을 지키는 것이 중요한 이유

• 특정행동을 취소하고 다시 실행하는 등의 복잡한 특징들을 구현하기 쉽게 만듦(이전 버전의 이력을 유지하고 나중에 재사용 가능하게 함)
• 변화를 감지가 용이(참조하고 있는 불변 객체가 이전 객체와 다르다면 변화가 발생한 것이라 가정)
• React에서 다시 렌더링하는 시기를 결정