[REACT] STATE

 

[REACT] 컴포넌트(Components)와 Props

---

STATE 란

1. 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
2. state 가 체인지가 되면 변화를 감지하여 리렌더링을 수행한다.
3. 클래스와 함수형 컴포넌트의 사용 방법은 각 각 다르다.
4. 함수형 컴포넌트에서는 훅(Hook) 개념을 이용해서 더욱 쉽게 사용 가능하다.

---

useState

useState는 배열 반환 함수이다.
첫 번째 배열의 요소에는 현재 값을 두 번째 요소는 상태를 변경하는 (setter)를 반환한다. 

const [data, setData] = useState('초기값')

• state는 어떤 타입이던 상관 없다 ( str, number, object, array, boolean )
• state는 여러 개 일 수도 있다.
• state는 직접 수정하면 안되고, setter를 이용해야 한다.

잘못된 코드의 예시

const StateComponent = () => {

    const [msg, setData] = useState('초기값')

		const exter = () => {
				msg = '나는 이렇게 바꿀꺼야!'; //error!!!!	(렌더링 x)	
		}

		return (
        <div>
            <h3>{msg}</h3>
            <button onClick={enter}>입장</button>
        </div>
    )

}

올바른 코드의 예시

const StateComponent = () => {

    const [msg, setData] = useState('초기값')

    const enter = () => setData('입장했습니다')
    const exit = () => setData('퇴장했습니다')

    return (
        <div>
            <h3>{msg}</h3>
            <button onClick={enter}>입장</button>
            <button onClick={exit}>퇴장</button>
        </div>
    )

}

---

클래스형 컴포넌트 state와 props

import React from 'react';

class MyComponent3 extends React.Component {
		

		//생성자에서 props 받기
    constructor(props) {
        super(props);
        this.state = {
            a : 1,
            b : props.age
        }
    }

  
    //클래스 컴포넌트에서는 render() 안에 리턴을 작성합니다.
    render() {
        //props받기
        let myName = "이순신"; //클래스형 컴포넌트의 변수의 사용은 render안에서 사용함
        let {name, age} = this.props; //클래스에서 props의 사용

        return (
            <div>
                {myName}의 클래스형 컴포넌트<br/>
                프로퍼티1:{name}<br/>
                프로퍼티2:{age}<br/>
                state의사용1: {this.state.a}<br/>
                state의사용2: {this.state.b}<br/>

            </div>
        )
    }
    
}
export default MyComponent3;

---

리렌더링을 야기하는 요인

잘못된 리렌더링이 발생하면 요인을 찾아야 한다.

• setState에 의한 state 변경
• 상위 컴포넌트에서 전달받은 Props의 변경
• 상위 컴포넌트 리렌더링 ▶ 하위 컴포넌트 리렌더링
• Provider의 value Prop가 바뀔 때, Context, Provider 하위에서 해당 컴포넌트를 구독하고 있는 
  모든 컴포넌트 리렌더링 ( ※ Context API 공부 필요 )
• 리덕스 스토어의 state에 변경 발생 시, useSelector를 사용해 리덕스 스토어의 state를 조회하는 컴포넌트 리렌더링