state와 재렌더링

state는 데이터를 이용하는데 사용하고 props와 비슷한 기능을 한다 그렇다면 state는 왜 사용하는걸까?

 

state와 props 차이

리액트에서 컴포넌트에서 다루는 데이터는 props와 state 2개로 나뉜다 props는 부모 컴포넌트가 자식 컴포넌트에 넘겨주는 값이다 자식 컴포넌트는 props를 받기만 하고 받아온 props를 직접 수정할 수는 없다 따라서 props는 정적이고 동적인 데이터를 사용한다면 state를 사용해야한다

또한 state는 값이 변경될 수 있기 때문에 값이 변경된다면 재 렌더링이 필요하게 된다

 

state 사용

state 사용할려면 useState를 사용해서 선언한다

//App.js
import React, { useState } from "react";
import './App.css';

function Component() {
	console.log(useState("스테이트 입니다"));

	return (
	 <h1>state 사용법</h1>
	);
  }

export default Component;

 

state를 출력하면 2개 값을 가진 배열이 나오고 0번 인덱스에는 선언할때의 값 1번 인덱스에는 함수가 들어간다

따라서 state를 선언할 때 배열로 선언하고 첫번째에는 값이 저장될 변수 이름을 적는다const[변수이름,함수이름] = useState('값')

 

0번 변수이름 1번 함수 이름이 들어가는데 1번 인덱스는 state값을 변경시킬때 사용하는 함수가 된다 state 값이 변경된다면 재렌더링이 일어나는것을 볼 수 있다

import React, { useState } from "react";
import './App.css';

function Component() {
	const [value,setValue] = useState("스테이트 입니다");
	function onChangeBtn() {
		setValue('스테이트 변경입니다');
	}
	console.log("value:" , value);//재렌더링과 스테이트 값을 확인

	return (
		<>
		<h1>state 사용법</h1>
		<p>{value}</p>
		<button onClick={onChangeBtn}>state 변경 버튼</button> //버튼을 누르면 위에 선언한 함수를 실행한다
		</>
	);
  }

export default Component;

 

state 값이 변경되어 재렌더링되는데 만약 state를 1번인덱스 함수를 이용하지 않고 state를 변경한다면 리액트는 해당 스테이트가 변경되었는지 모르기 때문에(재렌더링이 일어나지 않음) 위에처럼 setVlaue함수를 통해서 state값을 변경해줘야한다 따라서 반드시 값을 바꿀때 변경함수를 이용해야 한다

재렌더링이 되지 않는다면 값이 바뀌어도 스테이트 입니다 ->스테이트 변경입니다로 변하지 않는다

 

 

state 다른 컴포넌트 이용해서 값 변경

state는 함수를 이용해서 값을 변경한다 만약에 다른 컴포넌트(자식)에서 값을 변경 할 수 있도록 하고 싶다면 함수를 넘겨주면 된다

//App.js
import React, { useState } from "react";
import './App.css';
import ChildComponent from "./components/ChildComponent";

function Component() {
	const [value,setValue] = useState("스테이트 입니다");
	console.log("value:" , value);

	return (
		<>
		<h1>state 사용법</h1>
		<p>{value}</p>
		<ChildComponent changeValue = {setValue} ></ChildComponent>
		</>
	);
  }

export default Component;

 

//ChildComponent.js
import React from 'react';

function ChildComponent(props) {
    const handleClick = () => {
        props.changeValue("값이 변경되었습니다")
    };
  
    return <button onClick={handleClick}>값 변경</button>;
    }
export default ChildComponent;

하위 컴포넌트 ChildComponent도 재렌더링 된다(재렌더링 조건 1,4번)

 

 

state 주의점

state 변경함수를 이벤트나 다른 컴포넌트의 프로퍼티로 전달할때 함수는 이름만 전달해야된다 예시로 setValue() -> x setValue -> o

//App.js
<ChildComponent changeValue = {setValue()} ></ChildComponent>

setValue->setValue() 로 변경하게 된다면

` Too many re-renders React limits the number of renders to prevent an infinite loop` 너무 많은 리렌더링 된다고 한다

이유는 changeValue = {setValue()}에서 함수를 전달하는 의미로 작성했지만 setValue()는 함수를 실행시키기 때문에 재렌더링이 일어나고 또 무한 재렌더링이 일어나게된다 따라서 함수를 전달할때 changeValue = {setValue}이렇게 전달해야 한다

 

state변경 함수는 위치가 매우 중요하므로 무한 재렌더링이 일어나지 않도록 적당한 위치에 잘 작성해야된다

 

 

재렌더링

1. 내부 상태값(state) 변경

2. 부모가 전해준 속성(props) 변경

3. 중앙 상태값(redux store 등) 변경

4. 부모 컴포넌트가 재렌더링되는 경우, 자식 컴포넌트도 재렌더링

    

재렌더링이 일어나는 경우 4가지인데 여기서 1번고 4번을 통해서 state가 변경 된다면 하위 컴포넌트( 여기서 ChildCompoment)도 재렌더링 된다는것을 알 수 있다