리액트 state 사용하기

state 만들기

자료를 잠깐 저장할 땐 변수, state를 사용 (const, let, var)

let [a, b] = useState('남자 코드 추천')

a자리에 state 이름을 만들어서 사용할 수 있다.

destructuring 문법 사용법
let [name, age] = ['Kim', 20]
name에는 Kim이 들어가고 age에는 20이 들어간다.

state를 활용해서 아래처럼 작성할 수 있다.

function App() {
    let post = '강남 우동 맛집';
    let [title, b] = useState('남자 코드 추천')
    return (
        <div className="App">
            <div className="black-nav">
                <div>개발 blog</div>
            </div>
            <div className="list">
                <h4>{title}</h4>
                <p>2월 17일 발행</p>
            </div>
        </div>
    );
}

변수의 선언과 state의 차이는 재랜더링의 차이이다.
만약에 위에 설정된 title의 값이 변수인 경우 변수가 변경된다면 다시 변경 후 재랜더링을 해줘야 하는 경우가 발생한다. 하지만 state는 변경이 발생하면 state가 포함된 html을 자동으로 랜더링해준다.

따라서 state는 자주 변경이 될 것 같은 데이터들을 저장하는게 좋다.

state 데이터 변경

단순 변수 변경

state의 데이터를 변경하기 위해서는 선언한 state의 두번째 인자값을 활용하여 변경한다.
두번째 값은 함수인데 아래와 같이 함수 내 인자값을 넣어주면 해당 값이 state값으로 변경된다.

function App() {
    let [goodCount, setGoodCount] = useState(0);
    
    return (
        <div className="App">
            <div className="list">
                <h4>
					<span onClick={()=>{
      					setGoodCount(goodCount+1);
    				}}>👍
					</span>
                    {goodCount} 
				</h4>
            <div>
        </div>
    );
}

onClick 이벤트로 따봉 클릭 시 setGoodCount 함수를 호출하여 기존의 state변수인 goodCount값에 +1을 더해준다.
state값이 변경되었으면 자동으로 리랜더링이 발생된다.

배열, Object 변경

배열이나 Object는 값을 저장하지 않고 값을 가리키는 위치만 저장하므로 일반 변수와는 다르게 저장해야한다. 그 이유는 state는 변경이 발생한 경우에만 리랜더링을 발생시키므로 배열이나 Object를 직접 변경하게되면 값은 변경되지만 그 값을 가리키는 주소는 변경되지 않으므로 리랜더링이 발생되지 않는다.

let data1 = [1,2,3,4,5,6,7];
let data2 = data1;
data2[0] = 1000;  //data2 변경
console.log(data2 === data1)   //true

배열이나 Object를 수정하고 싶으면 독립적인 카피본을 만들어 수정하는게 좋다.

따라서 독립적인 copy본을 생성하여 수정하면 정상적으로 리랜더링이 발생된다.

function App() {
    let [title, setTitle] = useState(['남자 코드 추천','여자 코트 추천','맛집 추천']);
    return (
        <div className="App">
            <button onClick={()=>{
                let copy = [...title]; //독립적인 copy본을 생성
                copy[0] = '여자 코트 추천';
                setTitle(copy);
            }}>제목 수정</button>
        </div>
    );
}