[React] state

1. State

😺  state 가 무엇일까 ?? 

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

 

2.  useState - hook

  useState(초기값) - 함수(hook)

 

📍  useState() : 배열반환

 

첫번째 배열의 요소에는 현재값을, 두번째 요소는 상태를 변경하는 (setter) 를 반환합니다.

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

 

state는 어떤 타입이던 상관 없습니다. (str, number, object, array, boolean… )

state는 여러개 일 수도 있습니다.

 

 

 

😺  이때 !! state 는 아래와 같은 특징을 가지고 있다. 꼭 지키도록 하자 !

 

1. 상태 직접 수정 금지: State는 직접 수정하면 안된다

(리액트가 변경사항을 감지하지 못함 , 즉 렌더링 사이클이 제대로 작동하지 않을 수 있음) 

 

2. 상태 업데이트 함수 사용  : setter 를 사용해야한다.

setState 함수(클래스형 컴포넌트의 경우)

상태 업데이트 함수(함수형 컴포넌트의 경우, 예: setSomeValue)를 사용

 

 

📍 잘못된 코드

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;

 

 

 

 

 

😺  잘못된 리렌더링이 발생하면 리렌더링의 요인을 확인해야한다!

 

📍   리렌더링을 야기하는 요인

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

 

 

 

---

📍 함수형 컴포넌트 예제

[ App.js ]

import { Fragment } from "react";
import StateComponent from "./component/StateComponent.js";
import CountComponent from "./component/CountComponent.js";
import ClassComponent from "./component/ClassComponent.js";

function App() {


  return (
    <Fragment>
      <StateComponent />
      <CountComponent />
      <ClassComponent name="길동잉" age={20}/>
    </Fragment>
  )

}

export default App;

 

 

[StateComponent.js]

import { useState } from "react";


function StateComponent() {

  //useState는 함수형 컴포넌트에서만 사용할 수 있는 hook
  //반환이 배열이고 [0]번째에 현재데이터, [1]값을 변경하는 setter함수를 반환함
  let [data, setData] = useState('초기값');
  let [msg, setMsg] = useState('black');
  
  // let data = result[0]; //data
  // let setData = result[1]; //fun

  let enter = () => {
    //data = "이렇게 값을 바꾸면?"; //값을 직접 바꾸는 것을 허용하지 않음.
    setData("이렇게 값을 바꾸는 거임"); //값을 변경하는 setter함수 -> 비동기적으로 데이터를 change, 리렌더링 수행
  }

  return (
    <div>
      현재 데이터 {data}
      <br/>
      값 변경하기 <button onClick={enter}>입장</button>
      <br/>
      값 변경하기 <button onClick={() => setData("퇴장했습니다") }>퇴장</button>
      <br/>

      <h3 style={{color: msg}}>{msg}</h3>
      <button onClick={ () => setMsg('red') }>붉은색</button>
      <button onClick={ () => setMsg('green') }>푸른색</button>
      <button onClick={ () => setMsg('yellow') }>그 사이 3초 짧은색</button>


    </div>
  )

}

export default StateComponent;

 

  //useState는 함수형 컴포넌트에서만 사용할 수 있는 hook
  //반환이 배열이고 [0]번째에 현재데이터, [1]값을 변경하는 setter함수를 반환함
  let [data, setData] = useState('초기값');
  let [msg, setMsg] = useState('black');

 

let data = result[0]; //data
let setData = result[1]; //func

 

 현재 데이터 {data}

 

• 데이터 출력하기

 

 

 

let enter = () => {
    //data = "이렇게 값을 바꾸면?"; //값을 직접 바꾸는 것을 허용하지 않음.
    setData("이렇게 값을 바꾸는 거임"); //값을 변경하는 setter함수 -> 비동기적으로 데이터를 change, 리렌더링 수행
  }

• 값을 직접 바꾸면 안되고
• 값을 변경하는 setter 함수를 거친다.

 

 값 변경하기 <button onClick={enter}>입장</button>
  <br/>
  값 변경하기 <button onClick={() => setData("퇴장했습니다") }>퇴장</button>
  <br/>

 

 

• 버튼이 눌리면 enter 함수가 실행되면서 data 값이 바뀐다.

 

 

• 인라인 함수로 바로 익명함수 작성해서 setData("변경값") 으로 data 값을 변경해준다.

 

 

      <h3 style={{color: msg}}>{msg}</h3>
      <button onClick={ () => setMsg('red') }>붉은색</button>
      <button onClick={ () => setMsg('green') }>푸른색</button>
      <button onClick={ () => setMsg('yellow') }>그 사이 3초 짧은색</button>

 

 

  let [msg, setMsg] = useState('black');

• 색상 변경을 위한 훅

 

버튼을 누르면 setMsg() 가 동작하면서

<h3>의 color 값을 변경시킨다.

 

 

---

 

[CountComponent.js]

 

import { useState } from "react";

function CountComponent() {

  let [cnt, setCount] = useState(0);

//setData(함수); 
// setData((prev) => {
//   return prev + 1;  
// }) 


  return (
    <div>
      <h3> {cnt} </h3>
      <button onClick= { ()=> setCount(cnt + 1)}> 증가 </button>
      <button onClick= { ()=> setCount(cnt - 1)}> 감소 </button>
      <button onClick= { ()=> setCount(0)}> 초기화 </button>
    </div>
  )
}

export default CountComponent;

 

 

---

 

📍  클래스형 컴포넌트 [ClassComponent.js]

import { Component } from "react";

class ClassComponent extends Component {
  //useState 사용 불가
 
  constructor(props) {
    // 부모 자식을 생성자로 연결
    super(props);
    this.state = {
      a : 1
      ,b : this.props.name
    } 
    // 직접 만들어줘야함  useState 사용 불가
  }

  render() {

    let {name, age} = this.props;
    let {a, b} = this.state;


    return (
      <div>
           props {name}
           props2 {age}
          <hr />
           props {a}
           props2 {b}
      </div>
    )
  }



}

export default ClassComponent;

 

 

• class 상속 받는 경우
• super() 키워드는 필수
• this.state 로 직접 만들어줘야한다. (useState 사용 불가)

 

render() 메서드의 역할

1. 컴포넌트의 UI를 정의: render() 메서드는 JSX(JavaScript XML)를 반환하여 컴포넌트가 화면에 어떻게 나타날지를 설명합니다. 이 JSX는 React에 의해 HTML로 변환되어 브라우저에 표시됩니다.
2. 동적 데이터 표시: render() 메서드 내부에서 컴포넌트의 props(부모 컴포넌트로부터 전달된 데이터)와 state(컴포넌트 내부에서 관리되는 상태)를 사용해 동적인 데이터를 화면에 표시합니다.
3. 자동 업데이트: render() 메서드는 컴포넌트의 상태나 props가 변경될 때마다 React에 의해 자동으로 호출됩니다. 이로 인해 UI가 최신 상태를 반영하도록 유지됩니다.