React 독학 [State]

State 란? 

State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다.

 

선언방법

const App = () => {
    const [value, setValue] = useState(초기값);
    return ...
}

 

 

여기서 useState 를 사용하기 위해서는 반드시 import 확인하자!

import {useState} from "react";

 

 

1. component 내에서 유동적으로 변할 수 있는 값을 저장합니다.

2. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.

3. State값이 변경되고 재 렌더링이 필요한 경우 React가 자동으로 계산하여 변경된 부분을 렌더링 합니다.

 

State 도 Props 와 마찬가지로 값을 직접 변경하면 안된다.

State 값을 직접 변경하게 되면 component를 다시 렌더링할 타이밍을 알아차리지 못하기 때문.

반드시 setState함수를 이용해 값을 변경해야 한다. 그러면 함수 호출 시 재 렌더링 명령을 내리기 때문.

 

 

State 를 변경하는 두가지 방법

setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법이 있다.

함수를 넣는 경우 함수가 return 하는 값으로 State가 변경 된다.

 

Object 나 array 를 갖는 State를 만들 때 주의사항

 

예시와 같이 Object를 값으로 갖는 State도 만들 수 있다.

const [user, setUser] =
useState({name:"민수" , grade : 1})
setUser((current)=>{
	current.grade = 2;
    return current;
})

하지만 위 예시의 경우 React가 State의 변경을 감지하지 못한다.

user object 안의 grade가 변경되었지만 user 자체는 변경되지 않았기 때문이다.

박스 안의 내용물을 겉으로 보는것과 똑같다! grade가 내용물 , object 가 박스 라고 생각하면 된다.

 

const [user, setUser] =
useState({name:"민수" , grade : 1})
setUser((current)=>{
    const newUser = {...current}
    newUser.grade = 2;
    return newUser;
})

newUser를 선언 후 기존 값을  Spread Syntax 로 값을 전개해 값을 복사 후 복사된 값을 수정하여 return 해주면 된다.

 

 

Spread Syntax 란

... 라는 표현을 통해, 오브젝트 내부의 요소들을 전개할 수 있다.
iterable 한 오브젝트에 사용 가능하다.
ex) string, array, {}


오브젝트 리터럴 ({}) 의 경우에는 enumerable 한 프로퍼티를 순회하는 형식이다.
생긴 건 Rest Syntax 와 흡사한데, 역할이 다르다.
Rest Syntax 는 파라미터나 프로퍼티를 모으는 역할 이지만 Spread Syntax 는 오브젝트 내부의 요소들을 하나씩 늘어뜨리는 역할이다.


다른 객체의 속성이 모두 포함된 객체를 만들 때 유용하다.
"불변" 방식으로 프로그래밍할 때 일반적이다.


null 이나 undefined 가 뒤에 와도 에러를 내뱉지 않는다.
의도된 것이다.


상속된 속성이 아니라 객체 고유의 열거 가능한 속성만 사용한다.
출처: https://jake-seo-dev.tistory.com/345 

 

지시사항

1. React 패키지로부터 useState를 import 하세요.
2. App 컴포넌트 내에 count state를 선언합니다. 초기값은 0입니다.
3. className이 App인 div 안에 <span>과 <button>을 각각 작성하세요.
4. 작성한 span element에 X회 클릭하였습니다. 라는 문구를 작성합니다. X에는 선언한 count가 들어가야합니다. 5. 작성한 button에 onClick 이벤트 처리 함수를 작성합니다. click 시 setCount를 이용해 count가 1씩 증가할 수 있도록 합니다.

 

import React from 'react';
import {useState} from "react";
function App() {
    const [count, setCount] = useState(0);
  return (
    <div className="App">
      <span>{count}회 클릭하였습니다.</span>
      <button onClick ={() =>{
          setCount(count +1);
      }}>클릭</button>
    </div>
  );
}

export default App;

 

지시사항2

1. App 컴포넌트 내부에 person state를 선언합니다.
   초기값은 다음과 같습니다. { name: "김민수", count: 0 }
2. className이 "App"인 div 내부에 <button> element를 생성하세요.
3. 생성한 button을 클릭할 때마다 person.count가 1씩 증가되도록 설정합니다.
    이 때 원래의 state를 복제하여 변경하도록 합니다.
4. button 하단에 <span> element를 생성합니다.
    span 안의 내용은 다음과 같이 출력되도록 합니다.
    OOO님이 버튼을 XX회 클릭하였습니다.

OOO와 XX에는 각각 person.name과 person.count가 대입돼야 합니다.

import React,{ useState} from 'react';

function App() {
  const [person,setPerson] = useState({
      name: "김민수", count: 0
    })

  return (
    <div className="App">
    <button onClick={()=>{
        setPerson((current)=>{
            const newPerson ={ ...current };
            newPerson.count = newPerson.count +1;
            return newPerson;
        })    
    }}>클릭</button><br />
    <span>{person.name}님이 버튼 을{person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;

//current 는 현재값 이라는 의미를 가지고 있다